イベント Events
タブのイベントについて。
構文
構文
on( events, fn )メソッドを使う場合。
$( セレクター ).on( イベント, function () {
// 処理
} );
セレクターでタブを選択。
イベントに指定できるのは、show.bs.tab、shown.bs.tab、hide.bs.tab、hidden.bs.tab。
イベント一覧表
| イベント名 | 説明 |
|---|---|
| show.bs.tab |
タブの内容を開くメソッドを呼び出した時のイベント。event.targetは、アクティブなタブを表す。event.relatedTargetは、以前にアクティブだったタブがあった場合、ひとつ前にアクティブだったタブを表す。
|
| shown.bs.tab |
タブの内容の内容を開いた時のイベント。event.targetは、アクティブなタブを表す。event.relatedTargetは、以前にアクティブだったタブがあった場合、ひとつ前にアクティブだったタブを表す。
|
| hide.bs.tab |
タブの内容を閉じるメソッドを呼び出した時のイベント。event.targetは、閉じるタブを表す。event.relatedTargetは、新たにアクティブになるタブを表す。
|
| hidden.bs.tab |
タブの内容を閉じた時のイベント。event.targetは、閉じたタブを表す。event.relatedTargetは、新たにアクティブになったタブを表す。
|
サンプル
サンプル
show.bs.tab
- event.target:
- event.relatedTarget:
shown.bs.tab
- event.target:
- event.relatedTarget:
hide.bs.tab
- event.target:
- event.relatedTarget:
hidden.bs.tab
タブＡの内容
タブＢの内容
タブＣの内容
タブＤの内容
ソースコード
HTML
<p>show.bs.tab</p> <ul id="showBsTab"> <li>event.target: <span class="sampleTextTarget"></span></li> <li>event.relatedTarget: <span class="sampleTextRelatedTarget"></span></li> </ul> <p>shown.bs.tab</p> <ul id="shownBsTab"> <li>event.target: <span class="sampleTextTarget"></span></li> <li>event.relatedTarget: <span class="sampleTextRelatedTarget"></span></li> </ul> <p>hide.bs.tab</p> <ul id="hideBsTab"> <li>event.target: <span class="sampleTextTarget"></span></li> <li>event.relatedTarget: <span class="sampleTextRelatedTarget"></span></li> </ul> <p>hidden.bs.tab</p> <ul id="hiddenBsTab"> <li>event.target: <span class="sampleTextTarget"></span></li> <li>event.relatedTarget: <span class="sampleTextRelatedTarget"></span></li> </ul> <ul id="sampleTab" class="nav nav-tabs"> <li><a href="#sampleContentA" data-toggle="tab">タブＡ</a></li> <li class="active"><a href="#sampleContentB" data-toggle="tab">タブＢ</a></li> <li><a href="#sampleContentC" data-toggle="tab">タブＣ</a></li> <li><a href="#sampleContentD" data-toggle="tab">タブＤ</a></li> </ul> <div class="tab-content"> <div class="tab-pane" id="sampleContentA"> <p>タブＡの内容</p> </div> <div class="tab-pane active" id="sampleContentB"> <p>タブＢの内容</p> </div> <div class="tab-pane" id="sampleContentC"> <p>タブＣの内容</p> </div> <div class="tab-pane" id="sampleContentD"> <p>タブＤの内容</p> </div> </div>
JavaScript
$('#sampleTab a').on('show.bs.tab', function (event) {
var sampleTextTarget = $(event.target).text();
var sampleTextRelatedTarget = $(event.relatedTarget).text();
$('#showBsTab .sampleTextTarget').text(sampleTextTarget);
$('#showBsTab .sampleTextRelatedTarget').text(sampleTextRelatedTarget);
});
$('#sampleTab a').on('shown.bs.tab', function (event) {
var sampleTextTarget = $(event.target).text();
var sampleTextRelatedTarget = $(event.relatedTarget).text();
$('#shownBsTab .sampleTextTarget').text(sampleTextTarget);
$('#shownBsTab .sampleTextRelatedTarget').text(sampleTextRelatedTarget);
});
$('#sampleTab a').on('hide.bs.tab', function (event) {
var sampleTextTarget = $(event.target).text();
var sampleTextRelatedTarget = $(event.relatedTarget).text();
$('#hideBsTab .sampleTextTarget').text(sampleTextTarget);
$('#hideBsTab .sampleTextRelatedTarget').text(sampleTextRelatedTarget);
});
$('#sampleTab a').on('hidden.bs.tab', function (event) {
var sampleTextTarget = $(event.target).text();
var sampleTextRelatedTarget = $(event.relatedTarget).text();
$('#hiddenBsTab .sampleTextTarget').text(sampleTextTarget);
$('#hiddenBsTab .sampleTextRelatedTarget').text(sampleTextRelatedTarget);
});