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，以防將來對其他人有幫助。