单击浏览器的后退和前进按钮时在页面选项卡之间导航答案

【问题标题】：Navigate between page tabs when the browser's Back and Forward buttons are clicked单击浏览器的后退和前进按钮时在页面选项卡之间导航
【发布时间】：2014-11-09 03:53:55
【问题描述】：

我有一个简单的 jQuery 选项卡工作正常。此功能的代码是：

$(document).ready(function() {
    var tabHead = $('ul li');
    var tabContent = $('.content');

    tabContent.not(':first').hide().end();
    tabHead.on('click',function() { 
        tabContent.hide().eq($(this).index()).show();
    });
});

标签的 HTML 标记是：

<ul>
    <li><a href="#content1">Head 1</a></li>
    <li><a href="#content2">Head 2</a></li>
</ul>

<div class="content"> Some Content/........</div>
<div class="content"> Some Content/........</div>

但是，当我点击浏览器的“后退”和“前进”按钮时，只有 url 会发生变化，例如

http://some-path/demo-tabs/#tab2

标签的内容不显示。如何使标签的内容也显示在单击“后退”或“前进”按钮时？

【问题讨论】：

标签： javascript jquery html tabs

【解决方案1】：

监听窗口对象上的"hashchange" 事件，并在触发时触发对相关锚链接的点击。

您可以使用 jQuery attribute-equals selector 定位正确的链接。看起来像这样：a[href='#tab1']。您可以通过window.location.hash 属性从URL 中获取链接的href。

$(window).on("hashchange", function() {
    $("a[href='" + window.location.hash + "']").click();
});

看看这个支持hashchange事件的list of browsers。

【讨论】：

嘿 nbrooks...您建议的代码可以完成工作。但是现在当我点击选项卡时，似乎出现了页面重新加载或页面跳转。我也不能给出 e.preventDefault() 。你能提出一个解决办法吗？

【解决方案2】：

使用id 而不是href

 <ul>    
        <li><a id="#content1">Head 1</a></li>
        <li><a id="#content2">Head 2</a></li>
    </ul>

    <div class="content"> Some Content/........</div>
    <div class="content"> Some Content3........</div>

这将防止 URL 发生变化 JSFiddle

【讨论】：

我不想阻止 url 改变.....我希望它随着点击浏览器的上一个和下一个按钮时的标签内容而改变