カプセル・メニュー ≪ タブ ≪ JavaScript ≪ Bootstrap3日本語リファレンス

カプセル・メニュー用コンポーネントを使うサンプル。

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

サンプル

メニューＡの内容

メニューＢの内容

メニューＣの内容

メニューＤの内容

ソースコード

HTML

<!-- カプセル・メニュー -->
<ul class="nav nav-pills">
	<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>