使用JavaScript更改URL

Question

我有使用以下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 ，但我不知道如何使它们起作用。 最好将pagepage.com/tab1而不是用于SEO的哈希标签使用。 我知道您可以使用html5中的pushstate实现此目的，例如：

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

Answer 1

如果您使用pushstate html5功能，则该功能将不适用于IE8和其他较旧的浏览器，但是，如果您只想拥有ajaxy历史记录，则可以使用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.
}