Twitter Bootstrap 选项卡内容不会切换，除非通过 AJAX 定向到页面答案

【问题标题】：Twitter Bootstrap tab contant wont switch unless directed to page through AJAXTwitter Bootstrap 选项卡内容不会切换，除非通过 AJAX 定向到页面
【发布时间】：2013-05-20 20:44:10
【问题描述】：

我在整个网站中都使用 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>

谁能帮我解决这个问题？

【问题讨论】：

标签： javascript html ajax twitter-bootstrap tabs

【解决方案1】：

你必须为hashchange窗口事件添加一个监听器。

您可能在没有哈希的情况下打开了页面。此时，您的脚本已执行。当您更改地址栏中的哈希值时，页面将不会重新加载。所以没有人来处理那个事件。为此，您可以使用 hashchange 事件对此类更改做出反应。

有关此事件的更多信息和示例，请参阅MDN 文档。

如果您使用 jQuery，请查看此answer。

【讨论】：