تصف هذه المقالة طريقة تنفيذ قائمة التنقل في تبديل الخيار المتعدد بواسطة JS. شاركه للرجوع إليه. طريقة التنفيذ المحددة هي كما يلي:
نسخة الكود كما يلي:
<html>
<head>
<meta http-equiv = "content-type" content = "text/html ؛ charset = gb2312">
<title> العديد من خيار تبديل قائمة التنقل </title>
</head>
<type type = "text/css">
#dnavbar {
خلفية اللون: #ffffff ؛
}
#dnavbar li {
نوع القائمة: لا شيء ؛
تعويم: اليسار.
العرض: 84px ؛
الارتفاع: 28 بكسل ؛
ارتفاع الخط: 28 بكسل ؛
حجم الخط: 12 بكسل ؛
اللون: #ffffff ؛
الحدود: 1 بكسل Solid #ffffff ؛
الخلفية:#86C2FF ؛
محاذاة النص: المركز ؛
العرض: كتلة ؛
المؤشر: مؤشر.
}
#submenu {
الخلفية:#99CC66 ؛
العرض: 500 بكسل ؛
الحدود اليسرى: 1 بكسل Solid #ffffff ؛
اليمين الحدودي: 1 بكسل Solid #ffffff ؛
الارتفاع: 29px ؛
Line-Leight: 29px ؛
اللون: #ffffff ؛
حجم الخط: 12 بكسل ؛
حشو اليسار: 10 بكسل ؛
}
جسم {
الهامش: 0px ؛
}
ج: الرابط ، ج: زار {
اللون: #ffffff ؛
تدمير النص: لا شيء ؛
}
ج: تحوم {
اللون: #ffffff ؛
تدمير النص: لا شيء ؛
}
</style>
<script language = "javaScript">
وظيفة Showmenu ()
{
var barctt = document.getElementByidx_x ("dnavbar")
var liarr = barctt.getelementsbytagname_r ("li")
روابط var = صفيف جديد ()
الروابط [0] = "<a href = '#'> الموقع الحالي: الصفحة الرئيسية"
Links [1] = "<a href = '#'> project 1 </a> | <a href = '#'> project 2 </a> | <a href = '#'> project 3 </a> | <a href = '#'> project 4 </a>"
Links [2] = "<a href = '#'> project 1 </a> | <a href = '#'> project 2 </a> | <a href = '#'> project 3 </a>"
Links [3] = "<a href = '#'> project 1 </a> | <a href = '#'> project 2 </a> | <a href = '#'> project 3 </a> | <a href = '#'> project 4 </a> | <a href = '#'> project 5 </a>"
Links [4] = "<a href = '#'> project 1 </a> | <a href = '#'> project 2 </a>"
Links [5] = "<a href = '#'> project 1 </a> | <a href = '#'> project 2 </a> | <a href = '#'> project 3 </a>"
Links [6] = "<a href = '#'> project 1 </a> | <a href = '#'> project 2 </a>"
Links [7] = "<a href = '#'> project 1 </a> | <a href = '#'> project 2 </a>"
Links [8] = "<a href = '#'> project 1 </a> | <a href = '#'> project 2 </a>"
الروابط [9] = "<a href = '#'> project 1 </a> | <a href = '#'> project 2 </a>"
الروابط [10] = "<a href = '#'> project 1 </a> | <a href = '#'> project 2 </a>"
Links [11] = "<a href = '#'> project 1 </a> | <a href = '#'> project 2 </a>"
الروابط [12] = "<a href = '#'> project 1 </a> | <a href = '#'> project 2 </a>"
لـ (i = 0 ؛ i <liarr.length ؛ i ++)
{
Liarr [i] .onclick = function ()
{
Selectits (هذا ، Liarr ، روابط)
}
}
}
وظيفة SelectIs (indexobj ، allli ، infoarr)
{
فارس فهرس = 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 [index] ؛
}
</script>
<body onload = "showmenu ()">
<div id = "dnavbar" style = "float: none ؛ width: 560px ؛"> <li> home </li> <li> Entertainment Express </li> <li> عالم الموسيقى </li> <li> فلاش </li>
</div>
<div id = "submenu"> إعلان شؤون الموقع </div>
</body>
</html>
آمل أن تكون هذه المقالة مفيدة لبرمجة JavaScript للجميع.