Bootstrap(タブの使い方)

Tag:

Bootstrapのタブについて取り上げます。基本的な使い方やイベント処理など、デモを通じて確認してみてください。

基本的な使い方 tab

デモ

AAAA
BBBB
CCCC
DDDD

ソース

html

<div id="dnweb-tabtest">
    <!-- タブの切替部分 -->
    <ul class="nav nav-tabs">
        <li class="active"><a href="#tabtest1" data-toggle="tab">1</a></li>
        <li><a href="#tabtest2" data-toggle="tab">2</a></li>
        <li><a href="#tabtest3" data-toggle="tab">3</a></li>
        <li><a href="#tabtest4" data-toggle="tab">4</a></li>
    </ul>

    <!-- タブのコンテンツ部分 -->
    <div class="tab-content">
        <div class="tab-pane active" id="tabtest1">AAAA</div>
        <div class="tab-pane" id="tabtest2">BBBB</div>
        <div class="tab-pane" id="tabtest3">CCCC</div>
        <div class="tab-pane" id="tabtest4">DDDD</div>
    </div>
</div>

解説

タブの切替部分とタブのコンテンツ部分を用意します。タブ切替部分の「href」タブコンテンツ部分の「id」がそれぞれ対応するように記述してください。

data-toggleというデータ属性に「tab」と指定することで、タブの切替機能が動作するようになります。

タブをクリックしたとき、下記のように点線が表示されています。
tab_outline
点線を消したい場合は、次のようにoutlineを「none」にしてください。

#dnweb-tabtest a{
    outline: none;
}

基本的な使い方 pill

デモ

AAAA
BBBB
CCCC
DDDD

ソース

html

<div id="dnweb-tabtest2">
    <!-- タブの切替部分 -->
    <ul class="nav nav-pills">
        <li class="active"><a href="#pilltest1" data-toggle="pill">1</a></li>
        <li><a href="#pilltest2" data-toggle="pill">2</a></li>
        <li><a href="#pilltest3" data-toggle="pill">3</a></li>
        <li><a href="#pilltest4" data-toggle="pill">4</a></li>
    </ul>

    <!-- タブのコンテンツ部分 -->
    <div class="tab-content">
        <div class="tab-pane active" id="pilltest1">AAAA</div>
        <div class="tab-pane" id="pilltest2">BBBB</div>
        <div class="tab-pane" id="pilltest3">CCCC</div>
        <div class="tab-pane" id="pilltest4">DDDD</div>
    </div>
</div>

解説

3行目のclassを「nav-pills」に変更しています。
4~7行目のdata-toggleを「pill」に変更しています。

メソッド

tabメソッドで選択状態を変更できます。条件によって、表示するタブを変更したいときなどに利用します。

javascript

$('#dnweb-tabtest a[href="#tabtest1"]').tab('show') // 指定したタブを選択状態にする
$('#dnweb-tabtest a:first').tab('show')             // 最初のタブを選択状態にする
$('#dnweb-tabtest a:last').tab('show')              // 最後のタブを選択状態にする
$('#dnweb-tabtest li:eq(2) a').tab('show')          // 3つめのタブを選択状態にする

イベント

タブ切替時のイベントを設定することもできます。

デモ

AAAA
BBBB
CCCC

ソース

html

<div id="dnweb-tabtest3">
    <!-- タブの切替部分 -->
    <ul class="nav nav-tabs">
        <li class="active"><a href="#tabtest_event1" data-toggle="tab">1</a></li>
        <li><a href="#tabtest_event2" data-toggle="tab">2</a></li>
        <li><a href="#tabtest_event3" data-toggle="tab">3</a></li>
    </ul>

    <!-- タブのコンテンツ部分 -->
    <div class="tab-content">
        <div class="tab-pane active" id="tabtest_event1">AAAA</div>
        <div class="tab-pane" id="tabtest_event2">BBBB</div>
        <div class="tab-pane" id="tabtest_event3">CCCC</div>
    </div>
</div>

javascript

$('#dnweb-tabtest').on('hide.bs.tab', function (e) {
    alert("イベント発生: hide.bs.tab \n\n消されるタブ:" + e.target.hash + "\n表示されるタブ:" + e.relatedTarget.hash);
});

$('#dnweb-tabtest').on('show.bs.tab', function (e) {
    alert("イベント発生: show.bs.tab \n\n表示されるタブ:" + e.target.hash + "\n消されるタブ:" + e.relatedTarget.hash);
});

$('#dnweb-tabtest').on('hidden.bs.tab', function (e) {
    alert("イベント発生: hidden.bs.tab \n\n消されたタブ:" + e.target.hash + "\n表示されるタブ:" + e.relatedTarget.hash);
});

$('#dnweb-tabtest').on('shown.bs.tab', function (e) {
    alert("イベント発生: shown.bs.tab \n\n表示されたタブ:" + e.target.hash + "\n消されたタブ:" + e.relatedTarget.hash);
});

解説

javascript
1行目 タブが消される前のイベントです。
5行目 タブが表示される前のイベントです。
9行目 タブが消された後のイベントです。
10行目 タブが表示された後のイベントです。

参考URL

http://getbootstrap.com/components/#nav-tabs
http://getbootstrap.com/components/#nav-pills
http://getbootstrap.com/javascript/#tabs

スポンサーリンク