0

我有一个选项卡系统，我希望能够访问打开确定选项卡的 url。例如www.site.com/tab2（优先用于 SEO）或www.site.com#tab2。

我尝试过诸如window.location或window.history.pushstate之类的方法（在此处发布），但我不知道如何使它们发挥作用。

Javascript：

(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();

                    var hash = window.location.hash;
                    var tab = parseInt(hash.replace('#',''), 10);
                    $tabsNavLis.eq(tab - 1).click();

            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 -->
4

2 回答 2

0

您可以制作一个 lil 脚本来查看页面的哈希值window.location.hash。

因此，在文档准备好后，获取哈希值，然后模拟点击正确的选项卡。像这样的东西...

var hash = window.location.hash;
var tab = parseInt(hash.replace('#',''), 10);
$tabsNavLis.eq(tab - 1).click();

Tho，这只能像它一样工作，因为您的哈希值中包含选项卡的索引。但是，一旦有了哈希，您就会看到可以做什么。我希望这有帮助！

编辑：

这就是它应该的样子......虽然我自己没有尝试过代码。如果你想让我再弄乱它，把它放在一个jsFiddle中。

(function($){
    $(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();

        });

        var hash = window.location.hash;
        var tab = parseInt(hash.replace('#', ''), 10);
        $tabsNavLis.eq(tab - 1).click();

    });
})(jQuery);
于 2012-05-03T00:21:25.957 回答
0

阅读这篇文章，您应该能够弄清楚：

http://spoiledmilk.dk/blog/html5-chang-the-browser-url-without-refreshing-page

于 2012-05-03T00:01:48.343 回答