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

Question

这就是我希望链接一个按钮以在另一页的选项卡中显示与某个div相关的内容的方式，如何使用JQuery做到这一点？ 我提供了一张图片/图画，以便您可以理解我的意思。

<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>

因此，two.html的按钮必须直接链接以显示one.html，选项卡1，div中的内容，第二个按钮必须链接至one.html，选项卡1，第二div，即“ AnotherOne”

Answer 1

您可以将hash值添加到two.html上的链接，并在带有选项卡的页面上添加启动脚本以显示/隐藏所需的div。

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

在one.html上，您可以添加一个启动脚本来设置正确div的可见性。 如果您的标签页包含两个这样的div（默认情况下是否全部隐藏？）：

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

您可以将以下启动脚本添加到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

最好的方法是使用锚标签。如果使用按钮，则用锚标签将其包装起来。

这是代码。

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