Bootstrapでタブ（Togglable tabs）を表示する

Bootstrapを利用して、簡単にタブ表示をすることができます。
デモはこちら

Aipo.comサイトのコミュニティでもこちらを利用しています。

CSS

<link href="bootstrap.css" rel="stylesheet" type="text/css">

Javascript

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="bootstrap.js"></script>

HTML

<!--タブ-->
<ul class="nav nav-tabs">
<li class="active"><a href="#tab1" data-toggle="tab">タブ1</a></li>
<li><a href="#tab2" data-toggle="tab">タブ2</a></li>
</ul>
<!-- / タブ-->
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in active" id="tab1">
    <p>コンテンツ1</p>
</div>
<div class="tab-pane fade" id="tab2">
    <p>コンテンツ2</p>
</div>
</div>

タブの切替時にふんわりとしたアニメーション表示をしたくない場合はclassのfadeを削除すればOKです。