0

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

谁能帮我这个？

4

1 回答 1

0

您必须向hashchange窗口事件添加一个侦听器。

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

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

如果您使用的是 jQuery，请查看此答案。

于 2013-05-20T20:47:57.897 回答