JS Tab (tab.js)
タブは、各ペインには、一度に表示可能なものである別のペインにコンテンツを分離するために使用されます。
タブに関するチュートリアルについては、当社の読みBootstrap Tabs/Pillsチュートリアルを 。
タブのプラグインクラス
| クラス | 説明 | 例 |
|---|---|---|
| .nav nav-tabs | ナビゲーションタブを作成します。 | それを試してみてください |
| .nav-justified | ナビゲーション作りtabs/pills 768pxより広い画面で、親の同じ幅を。 小さい画面では、ナビゲーションタブが積層されています | それを試してみてください |
| .tab-content | 一緒に.tab-paneとdata-toggle="tab" 、それはタブtoggableを作ります | それを試してみてください |
| .tab-pane | 一緒に.tab-contentとdata-toggle="tab" 、それはタブtoggableを作ります | それを試してみてください |
ヴィアdata-*属性
追加data-toggle="tab"各タブに、そして追加.tab-paneすべてのタブの一意のIDを持つクラスをし、それらを包む.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>
»それを自分で試してみてください JavaScriptを介して、
手動で有効にします。
例
// 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')
»それを自分で試してみてください タブのオプション
| None |
タブの方法
次の表は、使用可能なすべてのタブの方法を示しています。
| 方法 | 説明 | それを試してみてください |
|---|---|---|
| .tab("show") | タブを表示します | それを試してみてください |
タブイベント
次の表は、使用可能なすべてのタブのイベントを示します。
| イベント | 説明 | それを試してみてください |
|---|---|---|
| show.bs.tab | タブが表示されようとしているときに発生します。 | それを試してみてください |
| shown.bs.tab | タブが完全に表示されたときに発生します（CSSの遷移が完了した後） | それを試してみてください |
| hide.bs.tab | タブが非表示にされる前に発生します | それを試してみてください |
| hidden.bs.tab | タブが完全に隠されている場合に発生します（CSSの遷移が完了した後） | それを試してみてください |
ヒント：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
}); »それを自分で試してみてください