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

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」を適用します。
タブに適用するクラス
要素 | クラス | 指定内容 |
---|---|---|
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」も追加します。