JavaScript 选项卡式界面 - 如何链接选项卡并为选项卡添加书签？

Question

我使用 jQuery 创建了一个选项卡式界面来显示/隐藏内容。

我希望能够链接到特定选项卡并允许用户为他们所在的当前选项卡添加书签。

当我为每个包含的 div 使用 ID 时，我可以通过从点击事件中删除 return false; 来实现此目的，但这会导致页面跳到选项卡的包含 div。

有没有办法确保 URL 包含地址的 # 部分但防止页面跳过？还有另一种我还没有遇到过的解决这个问题的方法吗？

//Get all containers with tab content
var tabContainers = $("div.tab");  

//Get value of # from URL
if (window.location.hash) {

  //if there's a # display the relevant tab
  $(tabContainers).hide().filter(window.location.hash).show();  

} else {
    //Show the first tab
    $(tabContainers).hide().filter(":first").show();    
}


$("ul#tabNav a").click( function () {

    //Hide all tab content then display the current
    $(tabContainers).hide().filter(this.hash).show();

    //prevent page from skipping but also prevents # from appearing in address bar
    return false;

});





<div id="tabNavContainer">
    <ul id="tabNav">
        <li id="tab1"> <a href="#a">Course essentials</a> </li>
        <li id="tab2"> <a href="#b">Course details</a> </li>
        <li id="tab3"> <a href="#c">Next steps</a> </li>
    </ul>
</div>
<div class="tab" id="a">
    <h3>TAB A</h3>
</div>
<div class="tab" id="b">
    <h3>TAB B</h3>
</div>
<div class="tab" id="c">
    <h3>TAB C</h3>
</div>

非常感谢任何帮助。

Answer 1

您可以设置window.location.hash以及读取它：

$("ul#tabNav a").click( function () {

    //Hide all tab content then display the current
    $(tabContainers).hide().filter(this.hash).show();

    window.location.hash = this.hash;

    //prevent page from skipping but also prevents # from appearing in address bar
    return false;

});

请注意，这会将页面添加到浏览器历史记录中，允许用户使用后退和前进按钮来更改哈希值。理想情况下，您还应该考虑处理这个问题。