碎碎念

Bootstrap的Tab功能預設點擊切換tab時瀏覽器的網址列是不會改變的。

當使用JS的"上一頁"(window.history.back();)功能，回到上一頁時又變成顯示第一個tab內容，無法指定預設為特定tab，變得有點麻煩。

需求：

1. 在點擊tab時變更url，在原本url後面加上"#tab名稱"

2. 要讓頁面讀取時切到指定tab

以下就是解法：

--

轉自 http://stackoverflow.com/questions/7862233/twitter-bootstrap-tabs-go-to-specific-tab-on-page-reload-or-hyperlink

// 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;
})

這邊Change hash for page-reload有點不完善，網頁讀取後會往下跳到TAB內容，連TAB都看不到，建議使用下面寫法，把捲軸捲回最上面。

轉自 http://stackoverflow.com/questions/12131273/twitter-bootstrap-tabs-url-doesnt-change

$(function(){
  var hash = window.location.hash;
  hash && $('ul.nav a[href="' + hash + '"]').tab('show');

  $('.nav-tabs a').click(function (e) {
    $(this).tab('show');
    var scrollmem = $('body').scrollTop() || $('html').scrollTop();
    window.location.hash = this.hash;
    $('html,body').scrollTop(scrollmem);
  });
});

加上scrollTop才能讓卷軸捲回最上面，否則會往下跳到TAB內容。

--