まずは何はなくともJSを読み込む

<script type="text/javascript" src="js/easy_tab.js"></script>

次に、タブ要素の全体をclass:tabMenuで括ります。

<div class="tabMenu">
...........................
.................
..........
</div>

タブのメニューにあたる部分はul(ol)タグでマークアップし、class:tabIndexを付与します。
個々のメニューのliタグにはページを開いたときに表示させておきたい部分にclass:activeを付与します。

<div class="tabMenu">
<ul class="tabIndex">
<li>メニュー1</li>
<li class="active">メニュー2</li>
<li>メニュー3</li>
</ul>

今回の例で行くとデフォルトではメニュー2の内容が表示されるようになります。

ここでの注意点としてはメニューは必ずliタグでないとダメです。仕様です。
更にliタグにはactive以外のclassはつけられません。

次にタブの内容にあたる部分にはclass:tabContentsを付与します。

<div class="tabMenu">
<ul class="tabIndex">
<li>メニュー1</li>
<li class="active">メニュー2</li>
<li>メニュー3</li>
</ul>
<p class="tabContents">内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1</p>
<p class="tabContents">内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2</p>
<p class="tabContents">内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3</p>
</div>

タブの内容部分のマークアップはclassがtabContentsでさえあれば、pタグでもdivタグでもdlタグでも何でもOKです。お好きなように。

これで完成です。見た目の制御はCSSでお願いします。

また、あえて言わなくても分かるとは思いますが、tabIndexの中の1番目に記述されているliタグと1番目のtabContentsが紐づいています。2番目のliタグは同様に2番目のtabContentsといった具合です。あと、当たり前ですけど、tabIndexのメニューの数とtabContentsの数は必ず一致していないといけません。

複数タブを使う場合はtabMenuを増やせばOKです。

対象ブラウザ

• WindowsIE6,7
• Firefox2以上
• Opera9.25以上
• Safari2以上

最後にサンプルやらソースをば。

サンプルページ

サンプルで使用しているJSやらCSSやら一式

MITライセンスなので使いたい方ご自由にカスタマイズどぞー。