<نمط>
/*بدء نمط تبديل الأعمدة*/
.لا شيء {العرض: لا شيء؛}
كتلة {عرض: كتلة؛}
/*نمط الرأس*/
.s_c {العرض: 800 بكسل؛ محاذاة النص: المركز؛}
.s_c أول {واضح: كلاهما؛ الهامش: 0؛}
.s_c li{list-style:none;float:left;position: نسبي;width: 70px;}
/**/
.c_0 {لون الخلفية: #CCCCCC;} /*الحالة المخفية*/
.c_1 {لون الخلفية: #0000CC;} /*حالة العرض*/
/**/
.s_ب{
الحدود: 1 بكسل الصلبة #666؛
الارتفاع: 160 بكسل؛
العرض: 440 بكسل؛
}
/**/
/*نمط تبديل نهاية الأعمدة*/
</نمط>
<لغة البرمجة = "جافا سكريبت">
وظيفة أأ(s_id){
ل(i=1;i<7;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>
<ديف>
<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)">الفئة الخامسة</a></div></li>
<li><div id="m6" ><a href="#" onmouseover="aa(6)">الفئة السادسة</a></div></li>
</ul>
</div>
<ديف>
<div معرف = "s1">
<div>الجزء الأول</div>
</div>
<div معرف = "s2">
<div>الجزء الثاني</div>
</div>
<div معرف = "s3">
<div>الجزء الثالث</div>
</div>
<div معرف = "s4">
<div>الجزء الرابع</div>
</div>
<div معرف = "s5">
<div>الجزء الخامس</div>
</div>
<div معرف = "s6">
<div>الجزء السادس</div>
</div>
</div>