Bootstrap3 Tabとtab.jsの使い方

Pocket

Webサイトに必ずある要素の1つがナビゲーションメニュー。ul>liタグで作ることが多いのですが、Bootstrap3を使えば、この構造のままでclassをつけるだけで簡単にスタイリッシュなナビゲーションメニューを作ることができます。

ナビゲーションと連動させて使えるタブコンテンツも便利な要素なので合わせて覚えておくのがオススメ。

Bootstrap3 ナビゲーションメニューとタブ

タブ型のタブナビゲーション

ナビゲーションは.nav-tabs.nav-pillsの2種類があります。どちらもulタグにclassを設置し、liタグでメニューを記述するだけなので簡単に作成できますね。

Class名 概要
.nav.nav-tabs タブ型のナビゲーションを表示
.nav.nav-tabs.nav-justified 横幅ぴったりにする
data-toggle="tab" タブコンテンツを機能させる、リンクに設置
`href=”#tab1″ 開きたいタブパネルを指定
<!-- タブ型のナビゲーション -->
<ul class="nav nav-tabs">
  <li class="active"><a href="#sample-tab1" data-toggle="tab">Tab1</a></li>
  <li><a href="#sample-tab2" data-toggle="tab">Tab2</a></li>
  <li><a href="#sample-tab3" data-toggle="tab">Tab3</a></li>
</ul>

<!-- 横幅ぴったり -->
<ul class="nav nav-tabs nav-justified">
  <li class="active"><a href="#sample-tab1" data-toggle="tab">Tab1</a></li>
  <li><a href="#sample-tab2" data-toggle="tab">Tab2</a></li>
  <li><a href="#sample-tab3" data-toggle="tab">Tab3</a></li>
</ul>

<!-- タブパネル -->
<div class="tab-content">
  <div role="tabpanel" class="tab-pane fade active" id="sample-tab1">Tab1</div>
  <div role="tabpanel" class="tab-pane fade" id="sample-tab2">Tab2</div>
  <div role="tabpanel" class="tab-pane fade" id="sample-tab3">Tab3</div>
</div>

デモページはこちら

リンク型のタブナビゲーション

こちらはリンク型のナビゲーションコンポーネント。縦に積み重ねることもできるので、サイドメニューによく使われます。

Class名 概要
.nav.nav-pills リンクタイプのナビゲーション
.nav.nav-pills.nav-stacked 縦に積み重ねる
.nav.nav-pills.nav-justified 横幅ぴったりにする
data-toggle="pill" タブコンテンツを機能させる、リンクに設置
`href=”#tab1″ 開きたいタブパネルを指定
<!-- リンク型のナビゲーション -->
<ul class="nav nav-pills">
  <li class="active"><a href="#sample-pill1" data-toggle="pill">Tab1</a></li>
  <li><a href="#sample-pill2" data-toggle="pill">Tab2</a></li>
  <li><a href="#sample-pill3" data-toggle="pill">Tab3</a></li>
</ul>

<!-- 縦に積み重ねる -->
<ul class="nav nav-pills nav-stacked">
  <li class="active"><a href="#sample-pill1" data-toggle="pill">Tab1</a></li>
  <li><a href="#sample-pill2" data-toggle="pill">Tab2</a></li>
  <li><a href="#sample-pill3" data-toggle="pill">Tab3</a></li>
</ul>

<!-- 横幅ぴったり -->
<ul class="nav nav-pills nav-justified">
  <li class="active"><a href="#sample-pill1" data-toggle="pill">Tab1</a></li>
  <li><a href="#sample-pill2" data-toggle="pill">Tab2</a></li>
  <li><a href="#sample-pill3" data-toggle="pill">Tab3</a></li>
</ul>

<!-- タブパネル -->
<div class="tab-content">
  <div role="tabpanel" class="tab-pane fade active" id="sample-pill1">Tab1</div>
  <div role="tabpanel" class="tab-pane fade" id="sample-pill2">Tab2</div>
  <div role="tabpanel" class="tab-pane fade" id="sample-pill3">Tab3</div>
</div>

デモページはこちら

ナビゲーションで使うリストのカスタマイズ

ナビゲーションは単にリンクとして表示するだけでなく、リンクを無効にしたり、ドロップダウンリンクを設置することができます。

Class名 概要
li.disabled リンクを無効にする
li.dropdown ドロップダウンリンクを作る
<ul class="nav nav-tabs">
  <li role="presentation" class="disabled"><a href="#">無効なリンク</a></li>
  <li role="presentation" class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
      ドロップダウン <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      <li class="active"><a href="#custom-tab1" data-toggle="pill">Tab1</a></li>
      <li><a href="#custom-tab2" data-toggle="pill">Tab2</a></li>
      <li role="separator" class="divider"></li>
      <li><a href="#custom-tab3" data-toggle="pill">Tab3</a></li>
    </ul>
  </li>
</ul>
<!-- タブパネル -->
<div class="tab-content">
  <div role="tabpanel" class="tab-pane fade active" id="custom-tab1">Tab1</div>
  <div role="tabpanel" class="tab-pane fade" id="custom-tab2">Tab2</div>
  <div role="tabpanel" class="tab-pane fade" id="custom-tab3">Tab3</div>
</div>

デモページはこちら

Tab.jsの使い方

タブはJavascriptで操作することも可能です。data-toggleの代わりに.tab('show')を使うことで、特定のリンクやボタンにタブ機能を追加することができます。

また、イベントを利用することで、タブが開いた際にイベント処理を行うこともできます。

option名 概要
$('#someTab').tab('show') 実行するとセレクタで指定したタブが開く
show.bs.tab 新しいタブが開く前に発動
shown.bs.tab タブが開いた後に発動
hide.bs.tab 新しいタブが表示されるときに発動
hidden.bs.tab 新しいタブが開いたら発動
// クリックでタブを表示
$('#myTabs a').click(function (e) {
  e.preventDefault(); // リンクの無効化
  $(this).tab('show');
});

// イベントでタブ操作
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target; // newly activated tab
  e.relatedTarget; // previous active tab
});

デモページはこちら