Question

我一直把头发拉了几个小时，我知道我错过了什么，某个地方......我找到了解决方案，解决了我需要实现的80％...... Best way to make twitter bootstrap tabs persistent来自dootzuky

$(document).ready(function() {
    // show active tab on reload
    if (location.hash !== '') $('a[href="' + location.href + '"]').tab('show');

    // remember the hash in the URL without jumping
    $('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
       if(history.pushState) {
            history.pushState(null, null, '#'+$(e.target).attr('href').substr(0));
       } else {
            location.hash = '#'+$(e.target).attr('href').substr(0);
       }
    });
});

但是，根据OP SE链接中的代码，substr（0）不是1

在我实现这个片段之后，我看到两个问题（一个是次要的，我可能会在以后找到答案）

点击标签时，我似乎得到了一个双重网址...

包含标签的页面就像这样

www.devsite.dev:8888/some_page.html?id=25&dis=4

但是当我点击标签时，我希望"dis=4"更新为href="some_page.html?id=25&dis=5#History_of_Posts"
中的内容
相反，我明白了：

www.devsite.dev:8888/some_page.html?id=25&dis=4#some_page.html?id=25&dis=5#History_of_Posts

而不是我想要的（或预期的）

www.devsite.dev:8888/some_page.html?id=25&dis=5#History_of_Posts
此外，历史记录（后退按钮）似乎显示此网址的多个条目，即使它只被点击一次？

非常感谢任何帮助或建议 - 提前谢谢。

Answer 1

这个被接受的答案https://stackoverflow.com/a/9393768/4494581实际上指出了我解决问题的正确方向......

// Javascript to enable link to tab
var url = document.location.toString();
if (url.match('#')) {
    $('.nav-tabs a[href="#' + url.split('#')[1] + '"]').tab('show');
} 

    // Change hash for page-reload
    $('.nav-tabs a').on('shown.bs.tab', function (e) {
    window.location.hash = e.target.hash;

})

唯一的麻烦就是页面跳跃，所以在阅读了其他一些答案之后，我实现了Gavin的答案，其中包含了history.pushState，它完成了我所需要做的所有事情。 https://stackoverflow.com/a/32615601 这对未来的其他任何人都有帮助。

Bootstrap选项卡完整的href哈希网址持久性问题

1 个答案: