Question

希望允许用户浏览页面上的多个选项卡，但是当点击后退按钮时，返回其上一页（无需返回其选项卡历史记录）。感觉就像我使用的方法中的一种（我改变了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>

Answer 1

如果您使用jQuery ui创建选项卡，则可以使用以下命令启动选项卡：

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

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

Example

Answer 2

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

js的第一个方面是在点击标签时处理创建历史记录的初始问题（感谢Pete建议使用＆＃39; .replace＆＃39;对比＆＃39; .hash =＆＃39;）

$('.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]

使用jQuery哈希来更改URL而不添加书签

2 个答案: