Bootstrap

【bootstrap2.3】Togglable tabsを実装する際のマークアップメモ。

自分用。

<ul class="nav nav-tabs" id="tabs">
<li class="active"><a href="#hoge">ほげ</a></li>
<li><a href="#piyo">ぴよ</a></li>
<li><a href="#fuga">ふが</a></li>
<li><a href="#hogera">ほげら</a></li>
</ul>
 
<div class="tab-content">
<div class="tab-pane fade active in" id="hoge">ほげ</div>
<div class="tab-pane fade" id="piyo">ぴよ</div>
<div class="tab-pane fade" id="fuga">ふが</div>
<div class="tab-pane fade" id="hogera">ほげら</div>
</div>
<script>
$(function(){
	$('#tabs a').click(function (e) {
		e.preventDefault();
		$(this).tab('show');
	})
})
</script>

※「.tab-content」内のdiv要素に「.fade」「.in」を振ってやるとアニメーションで切り替わるようになる。