Twitter Bootstrap選項卡：轉到頁面從新加載或超連接上的「特定」選項卡

我正在開發一個網頁，其中使用Twitter的Bootstrap Framework及其Bootstrap Tabs JS 。 除了一些小問題外，它的工做效果很是好，其中一個小問題是我不知道如何從外部連接直接轉到特定選項卡。 例如：

<a href="facility.php#home">Home</a>
<a href="facility.php#notes">Notes</a>

單擊外部頁面上的連接時，應分別轉到「主頁」選項卡和「註釋」選項卡

---

#1樓

更新

對於Bootstrap 3，將.on('shown', ...)更改成.on('shown.bs.tab', ....)

---

這基於@dubbe答案和此SO接受的答案 。 它處理window.scrollTo(0,0)沒法正常工做的問題。 問題在於，當替換顯示的選項卡上的url哈希時，瀏覽器將滾動到該哈希，由於它是頁面上的一個元素。 要解決此問題，請添加前綴，以使哈希不引用實際的頁面元素

// Javascript to enable link to tab
var hash = document.location.hash;
var prefix = "tab_";
if (hash) {
    $('.nav-tabs a[href="'+hash.replace(prefix,"")+'"]').tab('show');
} 

// Change hash for page-reload
$('.nav-tabs a').on('shown', function (e) {
    window.location.hash = e.target.hash.replace("#", "#" + prefix);
});

使用例

若是您的標籤窗格具備id =「 mytab」，則須要這樣放置連接：

<a href="yoursite.com/#tab_mytab">Go to Specific Tab </a>

---

#2樓

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

來自http://github.com/twitter/bootstrap/issues/2415#issuecomment-4450768的這段代碼很是適合我。

---

#3樓

我建議您使用Bootstrap做者在GitHub上的問題跟蹤器上提供的代碼：

var hash = location.hash
  , hashPieces = hash.split('?')
  , activeTab = $('[href=' + hashPieces[0] + ']');
activeTab && activeTab.tab('show');

您能夠在問題的連接上找到有關他們爲何不選擇支持的更多信息。

---

#4樓

該代碼根據#hash選擇正確的選項卡，並在單擊選項卡時添加正確的#hash。 （這使用jQuery）

在Coffeescript中：

$(document).ready ->
    if location.hash != ''
        $('a[href="'+location.hash+'"]').tab('show')

    $('a[data-toggle="tab"]').on 'shown', (e) ->
        location.hash = $(e.target).attr('href').substr(1)

或在JS中：

$(document).ready(function() {
    if (location.hash !== '') $('a[href="' + location.hash + '"]').tab('show');
    return $('a[data-toggle="tab"]').on('shown', function(e) {
      return location.hash = $(e.target).attr('href').substr(1);
    });
});

---

#5樓

這是我所作的，很是簡單，而且只要您的標籤連接具備與之關聯的ID，您就能夠獲取href屬性並將其傳遞給顯示標籤內容的函數：

<script type="text/javascript">
        jQuery(document).ready(function() {
            var hash = document.location.hash;
            var prefix = "tab_";
            if (hash) {
                var tab = jQuery(hash.replace(prefix,"")).attr('href');
                jQuery('.nav-tabs a[href='+tab+']').tab('show');
            }
        });
        </script>

而後，您能夠在網址中添加哈希，例如：＃tab_tab1，將從哈希自己中刪除「 tab_」部分，以便將導航標籤（tabid1）中實際標籤連接的ID放在此以後，所以網址應相似於：www.mydomain.com/index.php#tab_tabid1。

這對我來講很完美，但願對其餘人有幫助:-)