Bootstrap3 Tabとtab.jsの使い方

Pocket

bootstrap3-tab
Bootstrap3のTab機能を使うことで画面遷移を行わずに、簡単にコンテンツを切り替えることができます。実装方法もタブのリストとコンテンツをid名でつなげるだけと非常に簡単。

このページではBootstrap3のTogglable tabsとtab.jsの使い方を紹介します。

Bootstrap3のTab機能を使う

Tabの基本的な使い方

Tab機能を使うには切り替えボタンとそれに対応したコンテンツが必要になります。ボタンとコンテンツはid名でつなげるだけなので非常に簡単。

<!-- 
  タブの切り替えボタン 
  data-toggle : tabを入れることでボタン機能を有効に
  href : リンク先にコンテンツのid名を入れる
-->

<ul class="nav nav-tabs">
  <li class="active"><a href="#tab1" data-toggle="tab">Tab1</a></li>
  <li><a href="#tab2" data-toggle="tab">Tab2</a></li>
  <li><a href="#tab3" data-toggle="tab">Tab3</a></li>
</ul>

<!-- 
  タブの切り替えボタン 
  class : tab-paneで非表示化
  id : ボタンと同じidを使用する
-->

<div class="tab-content">
  <div class="tab-pane active" id="tab1">Tab1 Content</div>
  <div class="tab-pane" id="tab2">Tab2 Content</div>
  <div class="tab-pane" id="tab3">Tab3 Content</div>
</div>

このタブコンテンツのクラス名にfadeを入れることでフェードインアニメーションを適用することができます。

<!-- classにfadeを入れる -->

<div class="tab-content">
  <div class="tab-pane fade in active" id="home">...</div>
  <div class="tab-pane fade" id="profile">...</div>
  <div class="tab-pane fade" id="messages">...</div>
  <div class="tab-pane fade" id="settings">...</div>
</div>

デモページ

Bootstrap3のtab.jsの使い方

基本的な使い方は上記の通り。tabの有効化は以下のような方法でも可能です。

$('#myTab a[href="#profile"]').tab('show') // タブ名を選択
$('#myTab a:first').tab('show') // 最初のタブを選択
$('#myTab a:last').tab('show') // 最後のタブを選択
$('#myTab li:eq(2) a').tab('show') // 3つめのタブを選択

また、Bootstrap3ではイベントハンドラも用意されています。

  • show.bs.tab:タブが表示される前に発動
  • shown.bs.tab:タブが表示された後に発動

使い方はこんな感じ。

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // 有効化したタブ
  e.relatedTarget // 前のタブ
})