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

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

タブ用のul要素のclass属性に、nav nav-tabsを指定する。
タブ・メニューにおけるコンテンツ切り替え用のリンクである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-tabs">
	<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>