当浏览器的“后退”和“前进”按钮被点击时，如何在页面选项卡之间导航

Question

我有一个简单的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

选项卡的内容没有显示出来。我该如何让选项卡的内容在单击“后退”或“前进”按钮时也显示出来？

- littleanimboy

Answer 1

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

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

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

看一下这个支持hashchange事件的浏览器列表。

- nbrooks

---

嘿，nbrooks...你提出的代码确实可以工作。但是现在当我点击选项卡时似乎会出现页面重新加载或跳转。我不能使用e.preventDefault()。你能否提供一种解决方法？ - littleanimboy

Answer 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

- Captain Planet

---

我并不想阻止URL的更改......我希望在单击浏览器的上一个和下一个按钮时，它能够随着选项卡内容一起更改。 - littleanimboy