Twitter Bootstrap選項卡通常不會切換，除非通過AJAX指向頁面

Question

我通過整個站點使用Bootstrap框架實現響應式設計功能。我也使用AJAX調用在每個頁面之間切換。在一個頁面上，我使用Bootstrap選項卡在頁面內容之間切換。當您通過任何ajax鏈接指向頁面時，一切正常，但如果您手動輸入url，則標籤內容將不會更改。點擊它們時，標籤本身會發生變化，但內容保留在原始內容上。我原來雖然它可能與我使用的JavaScript有關，所以你可以指導用戶到一個帶有標籤的特定標籤，但是當我刪除代碼時它仍然不起作用。這裏是代碼：

<div class="tabbable"> <!-- Only required for left/right tabs --> 
    <ul class="nav nav-tabs"> 
     <li class="active"><a href="#tab1" data-toggle="tab">Tab 1</a></li> 
     <li><a href="#tab2" data-toggle="tab">Tab 2</a></li> 
     <li><a href="#tab3" data-toggle="tab">Tab 3</a></li> 
     <li><a href="#tab4" data-toggle="tab">Tab 4</a></li> 
    </ul> 
<div class="tab-content"> 
    <div class="tab-pane active" id="tab1"> 
     Tab #1 
    </div> 
    <div class="tab-pane" id="tab2"> 
     Tab #2 
    </div> 
    <div class="tab-pane" id="tab3"> 
     Tab #3 
    </div> 
    <div class="tab-pane" id="tab4"> 
     Tab #4 
    </div> 
</div> 
<script> 
    $(function(){ 
     if (window.location.hash) { 
      var hash = window.location.hash; 
      var tab = $('[data-toggle="tab"][href="' + hash + '"]'); 

      tab.show(); 
      tab.tab('show'); 
     } 
    }); 
</script> 

任何人都可以幫助我嗎？

Answer 1

您必須向hashchange窗口事件添加偵聽器。

您可能在沒有散列的情況下打開了頁面。此時，你的腳本被執行了。當您更改地址欄中的散列值時，頁面將會重新加載而不是。所以沒有人來處理這個事件。爲此，您可以使用hashchange事件來對此類更改作出反應。

有關此事件的更多信息和示例，請參閱MDN文檔。

如果您使用的是jQuery，請查看answer。