Bootstrap_Javascript_tab_html/css_WEB-ITnose

タブはWebで非常によく使われる機能です。ユーザーは、対応するメニュー項目をクリックまたはマウスを移動して、対応するコンテンツに切り替えることができます。

1. 構造分析

Bootstrap フレームワークのタブは主に 2 つの部分で構成されます:

Tab コンポーネント (メニュー コンポーネントとも呼ばれます)。Bootstrap の nav-tabs

に対応します。スイッチングされたタブパネルは通常、Bootstrap では

tab-pane で表されます

2. データ切り替えによりタブがトリガーされます (JS は必要ありません)

タブの宣言によるトリガーは、次の要件を満たす必要があります:

1. タブ ナビゲーション リンクに
data-toggle="tab"

を設定します。 2. そして data-target="コンテンツ パネルに対応するセレクター (通常は ID)" を設定します

3. パネルのコンテンツを統一します。これを

tab-content コンテナに配置します。各コンテンツ パネルのタブ ペインは、タブ内の data-target または href の値と一致する独立したセレクター (できれば ID) を設定する必要があります。

<!-- 选项卡组件（菜单项nav-tabs）--><ul id="myTab" class="nav nav-tabs" role="tablist">  <li class="active"><a href="#bulletin" role="tab" data-toggle="tab">公告</a></li>  <li><a href="#rule" role="tab" data-toggle="tab">规则</a></li>  <li><a href="#forum" role="tab" data-toggle="tab">论坛</a></li>  <li><a href="#security" role="tab" data-toggle="tab">安全</a></li>  <li><a href="#welfare" role="tab" data-toggle="tab">公益</a></li></ul><!-- 选项卡面板 --><div id="myTabContent" class="tab-content">  <div class="tab-pane active" id="bulletin">公告内容面板</div>  <div class="tab-pane" id="rule">规则内容面板</div>  <div class="tab-pane" id="forum">论坛内容面板</div>  <div class="tab-pane" id="security">安全内容面板</div>  <div class="tab-pane" id="welfare">公益内容面板</div></div>

3. JavaScript はタブをトリガーします

メソッドの呼び出し:

各リンクの click イベントで tab("show") メソッドを呼び出して、対応するタブ パネルのコンテンツを表示します。

HTML :

<ul id="myTab" class="nav nav-pills" role="tablist">  <li class="active"><a href="#bulletin" role="tab" data-toggle="pill">公告</a></li>  <li><a href="#rule" role="tab" >规则</a></li>  <li><a href="#forum" role="tab" >论坛</a></li>  <li><a href="#security" role="tab" >安全</a></li>  <li><a href="#welfare" role="tab" >公益</a></li></ul><!-- 选项卡面板 --><div id="myTabContent" class="tab-content">  <div class="tab-pane fade in active" id="bulletin">公告内容面板</div>  <div class="tab-pane fade" id="rule">规则内容面板</div>  <div class="tab-pane fade" id="forum">论坛内容面板</div>  <div class="tab-pane fade" id="security">安全内容面板</div>  <div class="tab-pane fade" id="welfare">公益内容面板</div></div>

JS:

<script>  $(function(){    $("#myTab a").click(function(e){      e.preventDefault();      $(this).tab("show");    });  })</script>

IV. タブスタイル

切り替え処理中にパネルの非表示と表示をスムーズにするために、パネルにクラス名を追加できます

フェード を使用して、段階的な効果を生み出します。

fade スタイルを追加するときは、初期デフォルトで表示されるコンテンツ パネルに in クラス名を忘れずに追加する必要があります。そうしないと、ユーザーはそのコンテンツを表示できなくなります。 ❤️