บทความนี้อธิบายวิธีการใช้เมนูการนำทางสลับแบบหลายตัวเลือกโดย JS แบ่งปันสำหรับการอ้างอิงของคุณ วิธีการใช้งานเฉพาะมีดังนี้:
การคัดลอกรหัสมีดังนี้:
<html>
<head>
<meta http-equiv = "content-type" content = "text/html; charset = gb2312">>
<tite> เมนูการนำทางสลับหลายตัวเลือก </title> ตัวเลือกหลายตัวเลือก </title>
</head>
<style type = "text/css">
#dnavbar {
พื้นหลังสี: #ffffff;
-
#dnavbar li {
ประเภทรายการประเภท: ไม่มี;
ลอย: ซ้าย;
ความกว้าง: 84px;
ความสูง: 28px;
ความสูงของสาย: 28px;
ขนาดตัวอักษร: 12px;
สี: #ffffff;
ชายแดน: 1px Solid #FFFFFF;
ความเป็นมา:#86C2FF;
TEXT-ALIGN: CENTER;
แสดง: บล็อก;
เคอร์เซอร์: ตัวชี้;
-
#submenu {
ความเป็นมา:#99CC66;
ความกว้าง: 500px;
ชายแดนซ้าย: 1px Solid #FFFFFF;
ชายแดนขวา: 1px Solid #FFFFFF;
ความสูง: 29px;
ความสูงของสาย: 29px;
สี: #ffffff;
ขนาดตัวอักษร: 12px;
Padding-Left: 10px;
-
ร่างกาย {
มาร์จิ้น: 0px;
-
A: Link, A: เยี่ยมชม {
สี: #ffffff;
การตกแต่งข้อความ: ไม่มี;
-
A: โฮเวอร์ {
สี: #ffffff;
การตกแต่งข้อความ: ไม่มี;
-
</style>
<ภาษาสคริปต์ = "JavaScript">
ฟังก์ชั่น Showmenu ()
-
var barctt = document.getElementByIdx_x ("dnavbar")
var liarr = barctt.getElementSbyTagname_r ("li")
var links = new Array ()
ลิงค์ [0] = "<a href = '#'> ตำแหน่งปัจจุบัน: โฮมเพจ"
ลิงก์ [1] = "<a href = '#'> โครงการ 1 </a> | <a href = '#'> โครงการ 2 </a> | <a href = '#'> โครงการ 3 </a> | <a href = '#'> โครงการ 4 </a>"
ลิงก์ [2] = "<a href = '#'> โครงการ 1 </a> | <a href = '#'> โครงการ 2 </a> | <a href = '#'> โครงการ 3 </a>"
ลิงก์ [3] = "<a href = '#'> โครงการ 1 </a> | <a href = '#'> โครงการ 2 </a> | <a href = '#'> โครงการ 3 </a> | <a href = '#'> โครงการ 4 </a> | <a href = '#'> โครงการ 5 </a>
ลิงก์ [4] = "<a href = '#'> โครงการ 1 </a> | <a href = '#'> โครงการ 2 </a>"
ลิงก์ [5] = "<a href = '#'> โครงการ 1 </a> | <a href = '#'> โครงการ 2 </a> | <a href = '#'> โครงการ 3 </a>"
ลิงก์ [6] = "<a href = '#'> โครงการ 1 </a> | <a href = '#'> โครงการ 2 </a>"
ลิงก์ [7] = "<a href = '#'> โครงการ 1 </a> | <a href = '#'> โครงการ 2 </a>"
ลิงก์ [8] = "<a href = '#'> โครงการ 1 </a> | <a href = '#'> โครงการ 2 </a>"
ลิงก์ [9] = "<a href = '#'> โครงการ 1 </a> | <a href = '#'> โครงการ 2 </a>"
ลิงก์ [10] = "<a href = '#'> โครงการ 1 </a> | <a href = '#'> โครงการ 2 </a>"
ลิงก์ [11] = "<a href = '#'> โครงการ 1 </a> | <a href = '#'> โครงการ 2 </a>"
ลิงก์ [12] = "<a href = '#'> โครงการ 1 </a> | <a href = '#'> โครงการ 2 </a>"
สำหรับ (i = 0; i <liarr.length; i ++)
-
liarr [i] .onclick = function ()
-
Selectishis (นี่, liarr, ลิงก์)
-
-
-
ฟังก์ชั่นเลือกนี่ (indexobj, allli, infoarr)
-
ดัชนี var = 0;
สำหรับ (i = 0; i <allli.length; i ++)
-
allli [i] .style.border = "1px solid #ffffff";
allli [i] .style.backgroundColor = "#86C2ff";
allli [i] .style.height = "28px";
if (indexoBj == allli [i])
-
ดัชนี = i;
-
-
indexobj.style.borderbottom = "0px solid #666688";
indexobj.style.backgroundColor = "#99cc66";
indexobj.style.height = "31px";
document.getElementByIdx_x ("Submenu"). innerhtml = infoarr [ดัชนี];
-
</script>
<body onload = "showmenu ()">
<div id = "dnavbar" style = "float: none; width: 560px;"> <li> home </li> <li> Entertainment Express </li> <li> Music World </li> <li> Flash </li>
</div>
<div id = "submenu"> การประกาศกิจการเว็บไซต์ </div>
</body>
</html>
ฉันหวังว่าบทความนี้จะเป็นประโยชน์กับการเขียนโปรแกรม JavaScript ของทุกคน