Question

我有一个标签系统，我希望能够转到并打开确定标签的网址。例如 www.site.com/tab2 （优先用于SEO）或 www.site.com＃tab2 。

我尝试过像 window.location 或 window.history.pushstate （posted here）这样的方法，但我不知道如何让它们发挥作用。

<小时/> 的使用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 -->

Answer 1

您可以通过window.location.hash创建一个lil脚本来查看页面的哈希值。

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

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

Answer 2

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

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

每个选项卡的特定URL，无需在javascript中重新加载

2 个答案: