タブは、異なったペインに分割したコンテンツを表示するのに使用します。各ペインは、一度には一つしか表示できません。
タブに関するチュートリアルは、Bootstrap タブ/ピル・チュートリアルご覧ください。
| クラス | 説明 | 例 |
|---|---|---|
| .nav nav-tabs | ナビゲーションタブを作成する | Try it |
| .nav-justified | 幅が 768px 以上の画面では、ナビゲーションタブ/ピルを親と同じ幅にする。小型画面では、 ナビゲーションタブをスタックする | Try it |
| .tab-content | .tab-pane と data-toggle="tab" を一緒に使用して、タブをトグル可能にする | Try it |
| .tab-pane | .tab-content と data-toggle="tab" を一緒に使用して、タブをトグル可能にする | tab toggableTry it |
各タブに data-toggle="tab" を追加し、すべてのタブには、ユニークな ID を持つ
.tab-pane クラスを追加し、.tab-content クラスでそれをラップします。
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab"
href="#home">Home</a></li>
<li><a data-toggle="tab" href="#menu1">Menu
1</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in
active">
<h3>HOME</h3>
<p>Some
content.</p>
</div>
<div id="menu1" class="tab-pane
fade">
<h3>Menu 1</h3>
<p>Some
content in menu 1.</p>
</div>
</div>
Try it Yourself »
手動で有効にします：
// Select all tabs
$('.nav-tabs a').click(function(){
$(this).tab('show');
})
// Select tab by name
$('.nav-tabs a[href="#home"]').tab('show')
// Select first tab
$('.nav-tabs a:first').tab('show')
// Select
last tab
$('.nav-tabs a:last').tab('show')
// Select fourth tab
(zero-based)
$('.nav-tabs li:eq(3) a').tab('show')
Try it Yourself »
| None |
次の表は、使用できる全タブメソッドの一覧です。
| メソッド | 説明 | Try it |
|---|---|---|
| .tab("show") | タブを表示する | Try it |
次の表は、使用できる全 tab イベントの一覧です。
| イベント | 説明 | Try it |
|---|---|---|
| show.bs.tab | タブが表示されようとしているときに発生 | Try it |
| shown.bs.tab | タブが完全に表示されたときに発生 (CSS のトランジションが完了した後) | Try it |
| hide.bs.tab | タブが隠されようとしているときに発生 | Try it |
| hidden.bs.tab | タブが完全に隠されたときに発生 (CSS のトランジションが完了した後) | completed)Try it |
チップ: アクティブなタブと、直前にアクティブだったタブを取得するには、 jQuery の event.target と event.relatedTarget を使用します：
$('.nav-tabs a').on('shown.bs.tab', function(event){
var x = $(event.target).text();
// active tab
var y = $(event.relatedTarget).text();
// previous tab
});
Try it Yourself »