スタッフによるブログです。WEBデザイン全般、IT関連、業務関連情報など。

  • 〒800-0222
  • 北九州市小倉南区中曽根4-16-2
  • TEL : 093-967-1128

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



タブ切り替えの作成:Bootstrapコードまとめ

Bootstrapのコードを少しずつまとめていきます。
今回は「タブ切り替え」の書式です。

~ 目次 ~

  1. 基本的な「タブ切り替え」の書式
  2. タブ切り替えのフェード効果

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

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」を適用します。

タブに適用するクラス

要素 クラス 指定内容
ul nav 切替タブの指定
ul nav-tabs 切替タブの指定
li active 最初から表示しておくタブ

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

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

要素 クラス 指定内容
a href=”任意のID名” 表示内容のID名を指定
a data-toggle=”tab” 切替タブのJavaScript

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

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

要素 クラス・属性 指定内容
div tab-content 表示内容を指定
 div tab-pane 個々の表示内容
 div ID属性 表示内容のID名
 div 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」も追加します。