Bootstrap タブ（Tab）プラグイン

タブは、切り替え可能なコンテンツ領域を作成するための柔軟なプラグインです。

使用方法

1. Bootstrap と jQuery ファイルを導入します。
2. 基本的な HTML 構造を作成します。
   • すべてのタブコンテンツを囲む .nav-tabs クラス
   • 各タブの <li> 要素（対応するコンテンツ領域へのリンクを含む）
   • 各コンテンツ領域の <div> 要素（.tab-pane クラスを使用）
3. 最初のタブに .active クラスを追加して、デフォルトで表示されるようにします。

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item" role="presentation">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item" role="presentation">
    <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
  <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div>
</div>

JavaScript 制御

$('#myTab a').click(function (e) { e.preventDefault() $(this).tab('show') }) コードを使用すると、タブをクリックしたときにページがジャンプせず、.tab('show') メソッドを使用して対応するコンテンツが表示されます。

フェードイン・フェードアウト効果

• .tab-pane 要素に .fade クラスを追加すると、フェードイン・フェードアウト効果を実現できます。
• 最初の .tab-pane 要素に .in クラスを追加すると、ページの読み込み時にすぐに表示されます。

メソッド

イベント

参考資料

• https://getbootstrap.jp/docs/4.1/components/navs/#javascript-behavior

よくある質問

Q1: タブをクリックしてもコンテンツが切り替わりません。

A1: 以下の点をチェックしてください。

• HTML の構造が正しいこと。
• JavaScript コードが正しく実装されていること。
• Bootstrap と jQuery が正しく読み込まれていること。

Q2: 特定のタブをデフォルトで表示するにはどうすればよいですか？

A2: デフォルトで表示したいタブの <li> 要素に .active クラスを追加します。また、対応するコンテンツ領域の <div> 要素にも .active と .show クラスを追加します。

Q3: タブのフェードイン・フェードアウト効果を無効にするにはどうすればよいですか？

A3: .tab-pane 要素から .fade クラスを削除します。