ブートストラップタブが応答しない場合はどうすればよいですか?-ブートストラップのチュートリアル-php.cn

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

藏色散人

リリース： 2020-11-30 16:37:06

オリジナル

2816 人が閲覧しました

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

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

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

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

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

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

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

に class = "active" があることがわかりました。

結局、ドキュメント構造が公式の例に完全に従っていないことがわかり、ボタンコンテナでは

が使用されていました。

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

<!-- 按钮组 -->
 <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 サイトの他の関連記事を参照してください。