<สไตล์>
/*เริ่มรูปแบบการสลับคอลัมน์*/
.none {แสดง: ไม่มี;}
.block {แสดง: บล็อก;}
/*แบบหัว*/
.s_c {ความกว้าง:800px;การจัดข้อความ: กึ่งกลาง;}
.s_c ul{ชัดเจน:ทั้งสอง;ระยะขอบ:0;}
.s_c li {รายการสไตล์: ไม่มี; ลอย: ซ้าย; ตำแหน่ง: ญาติ; ความกว้าง: 70px;}
-
.c_0 {สีพื้นหลัง: #CCCCCC;} /*สถานะที่ซ่อนอยู่*/
.c_1 {สีพื้นหลัง: #0000CC;} /*สถานะการแสดงผล*/
-
.s_b{
เส้นขอบ: 1px ทึบ #666;
ความสูง: 160px;
ความกว้าง: 440px;
-
-
/*สิ้นสุดรูปแบบการสลับคอลัมน์*/
</สไตล์>
<ภาษาสคริปต์ = "จาวาสคริปต์">
ฟังก์ชั่น AA(s_id){
สำหรับ(i=1;i<7;i++){
ถ้า(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"; //
-
-
-
</สคริปต์>
<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)">หมวดหมู่ที่ห้า</a></div></li>
<li><div id="m6" ><a href="#" onmouseover="aa(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>