ブートストラップ タブが応答しない場合はどうすればよいですか?

ブートストラップ タブが応答しない問題の解決策: まずブートストラップ タブ切り替えのコア コードを見つけて、次にボタン グループとコンテンツ グループを変更します。

このチュートリアルの動作環境: Windows10 システム、bootstrap3.0 この記事は、すべてのブランドのコンピューターに適用されます。

お勧め: 「ブートストラップ ビデオ チュートリアル 」

ブートストラップを使用するときに踏んだ落とし穴 (タブの切り替えは影響しません)

何度か使用しました数日前、ブートストラップ タブ ページをナビゲートするときに問題が発生しました。

まず、最初のタブ ボタンと最初のタブ コンテンツ部分がデフォルトでアクティブになっています。 2番目のタブボタンをクリックすると、2番目のタブのコンテンツが正常に表示されます。ただし、もう一度最初のタブ ボタンに戻っても、効果はありません。ドキュメントを確認したところ、両方の 25edfb22a4f469ecb59f1190150159c6 に class = "active" があることがわかりました。

結局、ドキュメント構造が公式の例に完全に従っていないことがわかり、ボタン コンテナでは ff6d136ddc5fdfeffaf53ff6ee95f185 の代わりに dc6dce4a544fdca2df29d5ac0ea9906b が使用されていました。

最後に、それを整理して、ブートストラップのタブ切り替えコア コードを次のように使用してみましょう:

<!-- 按钮组 -->
 <ul>
   <li class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
   <li><a href="#profile" data-toggle="tab">Profile</a></li>
   <li><a href="#messages" data-toggle="tab">Messages</a></li>
   <li><a href="#settings" data-toggle="tab">Settings</a></li>
 </ul>
 
<!-- 内容组 -->
 <div class="tab-content">
   <div class="tab-pane active" id="home">...</div>
   <div class="tab-pane" id="profile">...</div>
   <div class="tab-pane" id="messages">...</div>
   <div class="tab-pane" id="settings">...</div>
 </div>

以上がブートストラップ タブが応答しない場合はどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。