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

Question

我已经花了好几个小时了，我知道我在某处缺少东西...我找到了一种解决方案，可以解决我需要实现的80％的问题。 使Twitter Bootstrap选项卡持久化的最佳方法通过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

实施此代码段后，我看到了两个问题（一个是次要问题，以后可能会找到答案）

1. 单击选项卡时，我似乎得到一个双URL。

   带有选项卡的页面是这样的

   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

2. 另外，即使只单击一次，history（后退按钮）似乎仍显示该URL的多个条目？

任何帮助或建议，将不胜感激-预先感谢您。

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，以防将来对其他人有帮助。