タブ ≪ JavaScript ≪ Bootstrap3日本語リファレンス

ページを変遷することなく、表示コンテンツを切り替えるタブ・メニューに最適なJavaScript。

サンプル

タブＡの内容

タブＢの内容

タブＣの内容

タブＤの内容

使い方タブ・メニュードロップダウン機能を持ったタブ・メニューカプセル・メニュードロップダウン機能を持ったカプセル・メニューフェード・エフェクト JavaScriptで有効化イベント

ポイントは５つ。

タブ用のul要素のclass属性に、nav nav-tabs（タブ・メニュー）かnav nav-pills（カプセル・メニュー）を指定する。
タブ・メニューにおけるコンテンツ切り替え用のリンクであるa要素のdata-toggle属性に、tabを指定する。href属性には、表示する内容である要素のid属性値を指定する。
内容を表示する領域を表すdiv要素のclass属性にtab-contentを指定する。
表示する内容（div要素）のclass属性にtab-paneを指定する。id属性も指定する。
最初に表示したい内容とそのタブ・メニューのclass属性にactiveを指定する。

ソースコード

<!-- タブ・メニュー -->
<ul 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>

Bootstrap3
日本語リファレンス

タブ　　tab.js

使い方

タブ tab.js

使い方

タブ　　tab.js