jQuery UIを使うと、以下のようなUIを簡単に作ることができます。
ヘッダーで以下を読み込みます。
<script src="http://code.jquery.com/jquery-1.8.3.js"></script> <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
$(function() {
$( "#tabs" ).tabs();
});
HTMLソース例。
<div id="tabs">
<ul>
<li><a href="#tabs_a">タブA</a></li>
<li><a href="#tabs_b">タブB</a></li>
<li><a href="#tabs_c">タブC</a></li>
</ul>
<div id="tabs_a">
<p>タブAのコンテンツ領域です。</p>
</div>
<div id="tabs_b">
<p>タブBのコンテンツ領域です。</p>
</div>
<div id="tabs_c">
<p>タブCのコンテンツ領域です。<br>
タブCのコンテンツ領域です。</p>
</div>
</div>
できること
- 折りたたみ（タブを再度クリックするとコンテンツが閉じる）
- Ajax連携
- マウスオーバーでのイベントの切り替え
- シンプルなタブ編集（タブを追加、削除できる）
- 並べ替え
- 下向き
- 縦向き
- ページ読み込み時に表示させたいタブを指定する
- アニメーションや、エフェクトなど