使用 jQuery 哈希更改 URL 而无需添加书签答案

【问题标题】：Using jQuery hash to alter URL without bookmarking使用 jQuery 哈希更改 URL 而无需添加书签
【发布时间】：2014-08-28 01:54:06
【问题描述】：

希望允许用户在一个页面上浏览多个选项卡，但是当点击返回按钮时，返回到他们的上一页（不必浏览他们的选项卡历史记录）。感觉就像我正在使用的方法中的一种（或者我更改 URL 并处理历史记录，或者我不更改 URL 并且不处理历史记录）。我查看了 HTML History API，它似乎并没有直接说明这一点，我发现的许多帖子也没有。我希望我的标签可以链接到，但不能作为浏览器的单独页面（我疯了吗？）。非常感谢。

JavaScript

//add tab id to url 
var hash = window.location.hash;
hash && $('ul.nav a[href="' + hash + '"]').tab('show');

$('.nav-tabs a').click(function (e) {
    $(this).tab('show');
    window.location.hash = this.hash;

});

HTML

<div class="tabbable">
    <ul class="nav nav-tabs">
        <li><a href="#tab1" data-toggle="tab">My First Tab</a></li>
        <li><a href="#tab2" data-toggle="tab">My Second Tab</a></li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane active" id="tab1">
            <div id="ContentPaneTab1" runat="server"></div>
        </div>
        <div class="tab-pane" id="tab2">
            <div id="ContentPaneTab2" runat="server"></div>
        </div>
    </div>
</div>

【问题讨论】：

标签： jquery html hash tabs jquery-ui-tabs

【解决方案1】：

如果您使用 jQuery ui 创建选项卡，您可以使用以下方法来启动选项卡：

$( "#tabs" ).tabs({
    activate: function(event, ui) {                   
        window.location.replace('#' + $(ui.newPanel).attr('id'));                     
    }
});

这会将新点击的#添加到浏览器urkl中，而不会将其添加到历史记录中

Example

【讨论】：

【解决方案2】：

在@Pete 的帮助下，我能够使用我当前的设置（即不切换到 jQuery UI）想出一个足够的答案。

js 的第一个方面解决了单击选项卡时创建历史的初始问题（感谢 Pete 建议使用 '.replace' 与 '.hash ='）

$('.nav-tabs a').click(function (e) {
    var myTab = $(this).tab();
    window.location.replace($(myTab).attr('href'));

    //go to top of page instead of hashtag location
    window.scrollTo(0, 0);
});

然后，如果用户进入的页面中包含已包含主题标签的 URL，请打开相应的选项卡。

// if window.location.hash = true, than open the tab where tab x.href == hash
if(window.location.hash) {
    var hash = window.location.hash;
    $('ul.nav a[href="' + hash + '"]').tab('show');

    //go to top of page instead of hashtag location
    window.onload = function(){
        window.scrollTo(0, 0);
    }   
}

[使用 bootstrap 2 tab js]

【讨论】：