引導 'shown.bs.tab' 事件不觸發以編程方式顯示選項卡（使用選項卡（ '秀'））

Question

這是我的html：

<div class="profile_nav_tabs" id="profile_nav_tabs"> 
    <ul class="profile-tabs"> 
    <li> 
     <a data-toggle="tab" href="#tab1">Tab 1</a> 
    </li> 
    <li> 
     <a data-toggle="tab" href="#tab2">Tab 2</a> 
    </li> 
    <li> 
     <a data-toggle="tab" href="#tab3">Tab 3</a> 
    </li> 
    </ul> 
</div> 


<div class="tab-content"> 
    <div class="tab-pane" id="tab1">Tab1</div> 
    <div class="tab-pane" id="tab2">Tab2</div> 
    <div class="tab-pane" id="tab3">Tab3</div> 
</div> 

這是我的javascript：

(function(){ 
    var hash = window.location.hash; 
    if(hash){ 
    $("#profile_nav_tabs " + "a[href=" + hash + "]").tab('show'); 
    } 

    $('#profile_nav_tabs a').on('shown.bs.tab', function(event){ 
    window.location.hash = event.target.hash; 
    alert("hello"); 
    // some ajax call 
    }) 
})(); 

現在，如果我刷新頁面，網址爲local.dev/users/profile/#tab1，內容顯示爲tab1，但shown.bs.tab事件不會觸發。也就是說，既不顯示警報，也不顯示ajax調用。

僅當我單擊物理上的<a data-toggle="tab" href="#tab1">時才觸發事件。

我想更改每個選項卡更改的URL，我也想要一個回調一旦頁面加載顯示選項卡。

shown.bs.tab事件不會以編程方式顯示選項卡觸發嗎？

Answer 1

有讓你的代碼運行所需的兩件事情：

1. Propertly報價或逃避hash（由於＃字符），當它被插入到jQuery的屬性等於選擇。見jQuery Selectors, Category: Attribute：

   在選擇表達式屬性值必須遵循W3C CSS選擇規則;一般來說，這意味着除引號外應該包含除引號之外的其他內容。單引號內

   • 雙引號：$('a[rel="nofollow self"]')
   • 單引號雙引號內：$("a[rel='nofollow self']")
   • 轉義單引號內的單引號：$('a[rel=\'nofollow self\']')
   • 逃脫雙引號雙引號：$("a[rel=\"nofollow self\"]")

   您選擇的變化通常是風格或方便的問題。

   在以上報價鏈接，W3C已經下到上的CSS「有效標識符」說：

   在CSS中，標識符（包括元素名稱，類別，並在selectors的ID）可以包含只有字符[a-zA-Z0-9]和ISO 10646字符U + 00A0或更高，加上連字符（ - ）和下劃線（_）;他們不能以數字，兩個連字符或連字符後跟數字開頭。標識符也可以包含轉義字符和任何ISO 10646字符作爲數字代碼（參見下一項）。例如，標識符「B & W？」可寫成「B \ & W \？」或「B \ 26 W \ 3F」。

   ＃字符是碼點U + 0023，並使其在一個有效的標識符的字符的範圍之外。

2. 執行$.tab('show')

因此改變你的腳本之前添加shown.bs.tab事件處理程序如下：

(function(){ 
    $('#profile_nav_tabs a').on('shown.bs.tab', function(event){ 
    window.location.hash = event.target.hash; 
    alert("hello"); 
    // some ajax call 
    }); 

    var hash = window.location.hash; 
    if(hash){ 
    $("#profile_nav_tabs " + 'a[href="' + hash + '"]').tab('show'); 
    } 
})(); 

這必須被放置在DOM的HTML片段後，但我認爲這是已經是這種情況。

另請注意，在事件處理程序綁定之後，您錯過了一個分號。