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 に答える