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。