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>

然而，当我点击＆＃34;返回＆＃34;和＆＃34;转发＆＃34;浏览器的按钮，只有网址改变，例如。

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

标签的内容未显示。如何点击标签的内容也会显示在＆＃34;返回＆＃34;或＆＃34;转发＆＃34;按钮？

Answer 1

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

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

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

请查看支持hashchange事件的list of browsers。

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>

这样可以防止更改网址 JSFiddle

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

2 个答案: