フェード・エフェクト ≪ タブ ≪ JavaScript ≪ Bootstrap3日本語リファレンス

表示コンテンツを、フェード・イン、フェード・アウトで切り替えるサンプル。

class属性にtab-paneを指定したdiv要素のclass属性にfadeを追加する。
class属性にtab-paneを指定したdiv要素のうち、最初に表示するdiv要素のclass属性にinを追加する。

サンプル

タブＡの内容

タブＢの内容

タブＣ１の内容

タブＣ２の内容

タブＣ３の内容

タブＤの内容

ソースコード

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 fade" id="sampleContentA">
		<p>タブＡの内容</p>
	</div>
	<div class="tab-pane fade in active" id="sampleContentB">
		<p>タブＢの内容</p>
	</div>
	<div class="tab-pane fade" id="sampleContentC1">
		<p>タブＣ１の内容</p>
	</div>
	<div class="tab-pane fade" id="sampleContentC2">
		<p>タブＣ２の内容</p>
	</div>
	<div class="tab-pane fade" id="sampleContentC3">
		<p>タブＣ３の内容</p>
	</div>
	<div class="tab-pane fade" id="sampleContentD">
		<p>タブＤの内容</p>
	</div>
</div>