如何将按钮链接到另一页上具有div内容的选项卡？

Question

This is what I mean I wish to link a button to show content relating to a certain div in a tab on another page, how can I do this using JQuery? I have included a picture / drawing so that you can understand what I mean.

<div class="myTabs">
   <ul class="tabs" data-tab data-options="deep_linking:true">
        <li><a data-toggle="tab" href="#One">Tab 1</a></li>
        <li><a data-toggle="tab" href="#Two">Tab 2</a></li>
   </ul>
</div>
<div class="tabContent">
   <div id="One">This is the content in div one on Tab 1</div>
   <div id="AnotherOne">This is the content is second div on Tab 1</div>
</div>

So two.html has a button that must link directly to show content in one.html, Tab 1, div One & the second button must link to one.html, Tab 1, second div, ie'AnotherOne'

Answer 1

You could add a hash value to the link on two.html and add a startup script to the page with the tabs to show/hide the div that you need.

<a href='/two.html#one'>BUTTON ONE</a>
<a href='/two.html#two'>BUTTON TWO</a>

On one.html you can add a startup script that sets the visibility of the correct div. If your tab contains two divs like this (Everything hidden by default?):

<div class='one' style='display:none;'>div one</div>
<div class='two' style='display:none;'>div two</div>

You can add the following startup script to two.html:

<script>
$(document).ready(function() {
   // If the location is empty show the content of div one?
   var tab = window.location.hash ?? 'one';

   $('div.' + tab).show()
});
</script>

Answer 2

The best way you can do is using anchor tag.If you are using button wrap it by a anchor tag.

Here is the code.

<a href="page2.html#elementID"><button>Jump</button></a>