ドロップダウン機能を持ったカプセル・メニュー ≪ タブ ≪ JavaScript ≪ Bootstrap3日本語リファレンス

ドロップダウン機能を持ったカプセル・メニュー用コンポーネントを使うサンプル。

タブ用のul要素のclass属性に、nav nav-pillsを指定する。
カプセル・メニューにおけるコンテンツ切り替え用のリンクであるa要素のdata-toggle属性に、tabを指定する。href属性には、表示する内容である要素のid属性値を指定する。
内容を表示する領域を表すdiv要素のclass属性にtab-contentを指定する。
表示する内容（div要素）のclass属性にtab-paneを指定する。id属性も指定する。
最初に表示したい内容とそのカプセル・メニューのclass属性にactiveを指定する。
ドロップダウン機能を持たせたいメニュー項目のli要素のclass属性にdropdownを指定する。
ドロップダウン機能を持たせたいメニュー項目のli要素内のa要素のclass属性にdropdown-toggle、data-toggle属性にdropdownを指定する。
ドロップダウン機能を持たせたいメニュー項目のli要素内のa要素の下に、ドロップダウンで表示させるリンクリスト（ul要素）を配置する。
ドロップダウンで表示させるリンクリスト（ul要素）のclass属性にはdropdown-menuを指定する。

サンプル

メニューＡの内容

メニューＢの内容

メニューＣ１の内容

メニューＣ２の内容

メニューＣ３の内容

メニューＤの内容

ソースコード

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 class="dropdown">
		<a class="dropdown-toggle" data-toggle="dropdown" href="#">メニューＣ <span class="caret"></span></a>
		<ul class="dropdown-menu">
			<li><a href="#sampleContentC1" data-toggle="tab">メニューＣ１</a></li>
			<li><a href="#sampleContentC2" data-toggle="tab">メニューＣ２</a></li>
			<li><a href="#sampleContentC3" data-toggle="tab">メニューＣ３</a></li>
		</ul>
	</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="sampleContentC1">
		<p>メニューＣ１の内容</p>
	</div>
	<div class="tab-pane" id="sampleContentC2">
		<p>メニューＣ２の内容</p>
	</div>
	<div class="tab-pane" id="sampleContentC3">
		<p>メニューＣ３の内容</p>
	</div>
	<div class="tab-pane" id="sampleContentD">
		<p>メニューＤの内容</p>
	</div>
</div>