テスト - タブ

動作サンプル


aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

aaaaaaaaaaaaaaaaaaaaaa

aaaaaaaaaaaaaaaaaaaaaaa

aaaaaaaaaaaaaaaaaaaaaaaa

aaaaaaaaaaaaa

aaaaaaaa

aaaaaaaaaaaaaaaaaaaaaaaaaa

bbbbbbbbbbbbbbbbbbbbbb

bbbbbbbbbbb

bbbbbbbbbbb

cccccccccccccccccccccc

ccccccccccccccc

ccccccccccc

cccccccccccccccccccccc

ddddddddddddddddddddddddddddddddddddddd

ddddddddddddddddddddddddddddddddddd

ddddddddddddddddddddddddddddddddd

ddddddddddddddddddddddddddddddd

eeeeeeeeeeeeeeeeeeeeee

サンプル

eeeeeeeeeeeeeeeeeeeeee

eeeeeeeeeeeeeeeeeeeeee

javascriptの設定

tabControl.jsの30~40行目付近の設定値に、タブのナビゲーション部のIDをセットする。

//-----------------------------------------
// 設定値
//-----------------------------------------
conf : {
	// ナビゲーションのID
	tabNavId : 'tabNav',
	// デフォルトアクティブとする要素に付加するクラス名
	activeCls : 'activeTab',

続いて同部分下部にある設定値に、コンテンツ切り替え時の速度をセットする。

	// タブ切り替えの際に表示中コンテンツを非表示にする速さ
	hideHeightSpeed : 35,
	// タブ切り替えの際に非表示コンテンツを表示にする速さ
	viewSpeed : 40,

htmlソース

以下の形式でhtmlをマークアップする。

<ul id="tabNav">
<li class="activeTab"><a href="#tabContents01"><img src="images/tab01_n.gif" alt="" width="80" height="24" /></a></li>
<li><a href="#tabContents02"><img src="images/tab02_n.gif" alt="" width="80" height="24" /></a></li>
<li><a href="#tabContents03"><img src="images/tab03_n.gif" alt="" width="80" height="24" /></a></li>
<li><a href="#tabContents04"><img src="images/tab04_n.gif" alt="" width="80" height="24" /></a></li>
<li><a href="#tabContents05"><img src="images/tab05_n.gif" alt="" width="80" height="24" /></a></li>
</ul>
<div id="tabContents01">
  :
 コンテンツ
  :
</div>
<div id="tabContents02">
  :
 コンテンツ
  :
</div>
<div id="tabContents03">
  :
 コンテンツ
  :
</div>
<div id="tabContents04">
  :
 コンテンツ
  :
</div>
<div id="tabContents05">
  :
 コンテンツ
  :
</div>