0

我有一个使用以下 javascript 的 HTML 选项卡系统：

(function() {

        var $tabsNav    = $('.tabs-nav'),
            $tabsNavLis = $tabsNav.children('li'),
            $tabContent = $('.tab-content');

        $tabContent.hide();
        $tabsNavLis.first().addClass('active').show();
        $tabContent.first().show();

        $tabsNavLis.on('click', function(e) {
            var $this = $(this);

            $tabsNavLis.removeClass('active');
            $this.addClass('active');
            $tabContent.hide();

            $( $this.find('a').attr('href') ).fadeIn();

            e.preventDefault();
        });

    })();

HTML 标记是：

<ul class="tabs-nav">

    <li class="active">
        <a href="#1">TAB 1</a>
    </li>
    <li>
        <a href="#2">TAB 2</a>
    </li>
    <li>
        <a href="#3">TAB 3</a>
    </li>

</ul><!-- end .tabs-nav -->

<div class="tabs-container">
    <div class="tab-content" id="1">

        CONTENT OF TAB 1

    </div><!-- end #tab1 -->

    <div class="tab-content" id="2">

        CONTENT OF TAB 2

    </div><!-- end #tab2 -->

    <div class="tab-content" id="3">

        CONTENT OF TAB 3

    </div><!-- end #tab3 -->

UL是选项卡的名称，当您单击一个时，它们会将您带到该选项卡的内容。正如您在单击选项卡时看到的那样，链接是 www.thepage.com#tab1 等，但在地址栏中没有出现任何内容。我希望能够访问 thepage.com#tab2 并显示选项卡 2，但这不起作用。

我已经搜索了不同的方法，如javascript中的window.location或 html5 中的pushstate发布在此页面上，但我不知道如何使它们起作用。最好使用 thepage.com/tab1 而不是哈希标签用于 SEO 目的。我知道您可以使用 html5 中的 pushstate 来实现这一点，例如：

window.history.pushState(“object or string”, “Title”, “/new-url”);
4

1 回答 1

0

如果您使用 pushstate html5 功能，它将不适用于 IE8 和其他较旧的浏览器，但如果您只想拥有 ajaxy-history，您可以使用 url 的哈希部分。您可以使用以下方法修改 url 的哈希：

window.location.hash="mytabid";
// url will be http://foo.com/#mytabid

将此与哈希更改事件结合使用（您可能希望使用 jQuery 或插件来处理跨浏览器事件问题），您可以通过访问 location.hash 属性对使用后退按钮或页面加载时做出反应.

window.onhashchange = function(a){
    console.log(a); //probably easiest to access the location.hash here.
}
于 2012-05-03T00:25:19.920 回答