<スタイル>
/*列切り替えスタイルの開始*/
.none {表示: なし;}
.block {表示: ブロック;}
/*ヘッドスタイル*/
.s_c {幅:800px;テキスト配置:中央;}
.s_c ul{クリア:両方;マージン:0;}
.s_c li{リストスタイル:なし;フロート:左;位置:相対;幅:70ピクセル;}
/**/
.c_0 {背景色: #CCCCCC;} /*隠し状態*/
.c_1 {background-color: #0000CC;} /*ステータスの表示*/
/**/
.s_b{
ボーダー:1px ソリッド #666;
高さ: 160ピクセル;
幅: 440ピクセル;
}
/**/
/*列末切り替えスタイル*/
</スタイル>
<スクリプト言語="javascript">
関数 aa(s_id){
for(i=1;i<7;i++){
if(i==s_id){
document.getElementById("s"+i).className="block"; //コンテンツのスタイル
document.getElementById("m"+i).className="c_"+i+" c_1";
//document.getElementById("uid_"+i).focus();
}
それ以外
{
document.getElementById("s"+i).className="none"; //コンテンツは表示されません。
document.getElementById("m"+i).className="c_0"; //
}
}
}
</script>
<div>
<ul>
<li><div id="m1" ><a href="#" onmouseover="aa(1)">カテゴリ 1</a></div></li>
<li><div id="m2" ><a href="#" onmouseover="aa(2)">カテゴリ 2</a></div></li>
<li><div id="m3" ><a href="#" onmouseover="aa(3)">カテゴリ 3</a></div></li>
<li><div id="m4" ><a href="#" onmouseover="aa(4)">カテゴリ 4</a></div></li>
<li><div id="m5" ><a href="#" onmouseover="aa(5)">カテゴリ 5</a></div></li>
<li><div id="m6" ><a href="#" onmouseover="aa(6)">カテゴリ 6</a></div></li>
</ul>
</div>
<div>
<div id="s1">
<div>パート 1</div>
</div>
<div id="s2">
<div>パート 2</div>
</div>
<div id="s3">
<div>パート 3</div>
</div>
<div id="s4">
<div>パート 4</div>
</div>
<div id="s5">
<div>パート 5</div>
</div>
<div id="s6">
<div>パート 6</div>
</div>
</div>