Bootstrap3
日本語リファレンス

広告

フェード・エフェクト


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

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

サンプル

タブAの内容

タブBの内容

タブC1の内容

タブC2の内容

タブC3の内容

タブDの内容

ソースコード

HTML

<!-- タブ・メニュー -->
<ul class="nav nav-tabs">
	<li><a href="#sampleContentA" data-toggle="tab">タブA</a></li>
	<li class="active"><a href="#sampleContentB" data-toggle="tab">タブB</a></li>
	<li class="dropdown">
		<a class="dropdown-toggle" data-toggle="dropdown" href="#">タブC <span class="caret"></span></a>
		<ul class="dropdown-menu">
			<li><a href="#sampleContentC1" data-toggle="tab">タブC1</a></li>
			<li><a href="#sampleContentC2" data-toggle="tab">タブC2</a></li>
			<li><a href="#sampleContentC3" data-toggle="tab">タブC3</a></li>
		</ul>
	</li>
	<li><a href="#sampleContentD" data-toggle="tab">タブD</a></li>
</ul>

<!-- タブ内容 -->
<div class="tab-content">
	<div class="tab-pane fade" id="sampleContentA">
		<p>タブAの内容</p>
	</div>
	<div class="tab-pane fade in active" id="sampleContentB">
		<p>タブBの内容</p>
	</div>
	<div class="tab-pane fade" id="sampleContentC1">
		<p>タブC1の内容</p>
	</div>
	<div class="tab-pane fade" id="sampleContentC2">
		<p>タブC2の内容</p>
	</div>
	<div class="tab-pane fade" id="sampleContentC3">
		<p>タブC3の内容</p>
	</div>
	<div class="tab-pane fade" id="sampleContentD">
		<p>タブDの内容</p>
	</div>
</div>

広告