html - 如何将按钮链接到另一个页面上带有 div 内容的选项卡？

Question

This is what I mean我希望链接一个按钮以在另一页的选项卡中显示与某个 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，Tab 1，div One 和第二个按钮必须链接到 one.html，Tab 1，second div，即'AnotherOne'中的内容

Answer 1

您可以将哈希值添加到 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>