JavaScriptで有効化
tabメソッドを使い、JavaScriptでタブを有効化する方法。
構文
$('セレクター').tab('show');
「セレクター」で選択した要素のhref属性やdata-target属性に指定した値（id属性値など）の要素を表示する。
href属性を使う場合のサンプル
サンプル
タブＡの内容
タブＢの内容
タブＣの内容
タブＤの内容
ソースコード
HTML
<!-- タブ・メニュー -->
<ul id="sampleTab" class="nav nav-tabs">
<li><a href="#sampleContentA">タブＡ</a></li>
<li class="active"><a href="#sampleContentB">タブＢ</a></li>
<li><a href="#sampleContentC">タブＣ</a></li>
<li><a href="#sampleContentD">タブＤ</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').click(function (e) {
e.preventDefault();
$(this).tab('show');
});
このJavaScriptコードは、jquery.min.jsを読み込んだ後に配置する必要がある。
data-target属性を使う場合のサンプル
サンプル
タブＡの内容
タブＢの内容
タブＣの内容
タブＤの内容
ソースコード
HTML
<!-- タブ・メニュー -->
<ul id="sample2Tab" class="nav nav-tabs">
<li><a href="#" data-target="#sample2ContentA">タブＡ</a></li>
<li class="active"><a href="#" data-target="#sample2ContentB">タブＢ</a></li>
<li><a href="#" data-target="#sample2ContentC">タブＣ</a></li>
<li><a href="#" data-target="#sample2ContentD">タブＤ</a></li>
</ul>
<!-- タブ内容 -->
<div class="tab-content">
<div class="tab-pane" id="sample2ContentA">
<p>タブＡの内容</p>
</div>
<div class="tab-pane active" id="sample2ContentB">
<p>タブＢの内容</p>
</div>
<div class="tab-pane" id="sample2ContentC">
<p>タブＣの内容</p>
</div>
<div class="tab-pane" id="sample2ContentD">
<p>タブＤの内容</p>
</div>
</div>
JavaScript
$('#sample2Tab a').click(function (e) {
e.preventDefault();
$(this).tab('show');
});
このJavaScriptコードは、jquery.min.jsを読み込んだ後に配置する必要がある。