[Bootstrap] 如何讓bootstrap tab自動選在指定的tab下－碎碎念

Oct 07 Fri 2016 14:34
[Bootstrap] 如何讓bootstrap tab自動選在指定的tab下

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

Q: 如何讓bootstrap tab用超聯結的方式，自動切換至指定的tab？

A: 抓取網址最後#後面的tab名稱，用jQuery Selector選定後，將此tab改為show。

下面那條為，切換tab自動重新讀取頁面。

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