タブ切り替えの書式：Bootstrapコードまとめ

基本的な「タブ切り替え」の書式

Bootstrapでは用意されているJavaScriptを使って「タブ切り替え」を実装することが可能です。
クラスを適用するだけで簡単に作成できます。

実装例：HTML

<ul class="nav nav-tabs">
  <li class="active"><a href="#touhoku" data-toggle="tab">東北地方</a></li>
  <li><a href="#kantou" data-toggle="tab">関東地方</a></li>
  <li><a href="#chuubu" data-toggle="tab">中部地方</a></li>
</ul>
<div class="tab-content">
  <div class="tab-pane active" id="touhoku">
    <p>青森県・岩手県・宮城県・秋田県・山形県・福島県</p>
  </div>
  <div class="tab-pane" id="kantou">
    <p>茨城県・栃木県・群馬県・埼玉県・千葉県・東京都・神奈川県</p>
  </div>
  <div class="tab-pane" id="chuubu">
    <p>新潟県・富山県・石川県・福井県・山梨県・長野県・岐阜県・静岡県・愛知県</p>
  </div>
</div>

ブラウザでの表示例は サンプルページ をご参照ください。

以下、解説です。

タブ部分には、全体をul要素でclass「nav」「nav-tabs」を適用し、li要素で各項目を作成します。
最初から表示されている項目（li要素）にはclass「active」を適用します。

タブに適用するクラス

次に各タブのクリック時に表示内容を切り替えるために、各li要素の中のa要素に「href=”任意のID名”と「data-toggle=”tab”」を記述します

タブのa要素に適用する属性

最後に各タブに対応した表示部分の記述です。
全体をclass「tab-content」を適用したdiv要素で囲みます。
各項目ごとにclass「tab-pane」を適用したdiv要素を配置し、上記のa要素href属性に対応する任意のID名を記述します。
また、最初から表示される項目にはdiv要素にclass「active」を適用します。

表示内容に適用するクラス・属性

タブ切り替えのフェード効果

タブを切り替える際に、フェード効果を加えることも可能です

実装例：HTML

<ul class="nav nav-tabs">
  <li class="active"><a href="#touhoku2" data-toggle="tab">東北地方</a></li>
  <li><a href="#kantou2" data-toggle="tab">関東地方</a></li>
  <li><a href="#chuubu2" data-toggle="tab">中部地方</a></li>
</ul>
<div class="tab-content">
  <div class="tab-pane fade in active" id="touhoku2">
    <p>青森県・岩手県・宮城県・秋田県・山形県・福島県</p>
  </div>
  <div class="tab-pane fade" id="kantou2">
    <p>茨城県・栃木県・群馬県・埼玉県・千葉県・東京都・神奈川県</p>
  </div>
  <div class="tab-pane fade" id="chuubu2">
    <p>新潟県・富山県・石川県・福井県・山梨県・長野県・岐阜県・静岡県・愛知県</p>
  </div>
</div>

ブラウザでの表示例は サンプルページ をご参照ください。

class「tab-pane」を適用したdiv要素に、class「fade」を追加します。
最初から表示される内容にはclass「in」も追加します。