Cubix

コンテンツタブ

2007.04.06 Fri/PM

コンテンツをタブで分けて表示させるスクリプトです。

サンプル

• SampleTab 1
• SampleTab 2
• SampleTab 3

使い方

プデフォルトで開いておきたいタブを、以下のようにオンロードイベントに登録します。

EventListener.add(window, "load", function(){ Tab.change('Tab1', 'TabBlock1'); }, false);

タグの記述ルール

タグは以下のルールで記述します。

• アクティブタブの「li」タグクラス名は「active」、それ以外は空となる。すなわちクラスは定義できない。IDで定義するか、中のアンカーでスタイルをつける。

<!-- タブメニューとオンクリックした場合のJavascript -->
<ul class="Tab">
	<li id="Tab1"><a href="javascript:Tab.change('Tab1','TabBlock1')">SampleTab 1</a></li>
	<li id="Tab2"><a href="javascript:Tab.change('Tab2','TabBlock2')">SampleTab 2</a></li>
</ul>
<br style="clear:both" />
<div class="TabContent">
	<div id="TabBlock1" class="TabBlock">Tab1の内容</div>
	<div id="TabBlock2" class="TabBlock">Tab2の内容</div>
</div>

動作はWindowsのFirefox、IE、Operaしか確認してません。他の環境の動作報告求む。
ちなみに、MacIE、IE5以下、NN4.xはサポート対象外です。

ダウンロード

• BlockTab