Artikel ini menjelaskan metode menerapkan menu navigasi switching multi-opsi oleh JS. Bagikan untuk referensi Anda. Metode implementasi spesifik adalah sebagai berikut:
Salinan kode adalah sebagai berikut:
<Html>
<head>
<meta http-equiv = "konten tipe" content = "text/html; charset = gb2312">
<title> beberapa opsi menu navigasi sakelar </iteme>
</head>
<type style = "text/css">
#dnavbar {
Latar Belakang-Color: #FFFFFF;
}
#dnavbar li {
Daftar-gaya-tipe: tidak ada;
float: kiri;
Lebar: 84px;
Tinggi: 28px;
Line-Height: 28px;
font-size: 12px;
Warna: #FFFFFF;
Perbatasan: 1px solid #ffffff;
Latar belakang:#86c2ff;
Teks-Align: tengah;
Tampilan: Blok;
kursor: pointer;
}
#submenu {
Latar Belakang:#99cc66;
Lebar: 500px;
Border-left: 1px solid #ffffff;
Border-Right: 1px solid #FFFFFF;
Tinggi: 29px;
Line-Height: 29px;
Warna: #FFFFFF;
font-size: 12px;
Padding-left: 10px;
}
tubuh {
margin: 0px;
}
A: Link, A: Dikunjungi {
Warna: #FFFFFF;
Dekorasi Teks: Tidak Ada;
}
A: Hover {
Warna: #FFFFFF;
Dekorasi Teks: Tidak Ada;
}
</tyle>
<bahasa skrip = "javascript">
fungsi showmenu ()
{
var Barctt = document.getElementByIdx_x ("dnavbar")
var liarr = Barctt.getElementsByTagname_R ("li")
var link = array baru ()
Tautan [0] = "<a href = '#'> Lokasi Saat Ini: Halaman Beranda"
Tautan [1] = "<a href = '#'> Proyek 1 </a> | <a href = '#'> Proyek 2 </a> | <a href = '#'> Proyek 3 </a> | <a href = '#'> Proyek 4 </a>"
Tautan [2] = "<a href = '#'> Proyek 1 </a> | <a href = '#'> Proyek 2 </a> | <a href = '#'> Proyek 3 </a>"
Tautan [3] = "<a href = '#'> Proyek 1 </a> | <a href = '#'> Proyek 2 </a> | <a href = '#'> Proyek 3 </a> | <a href = '#'> Proyek 4 </a> | <a href = '#'> Proyek 5 </a>"
Tautan [4] = "<a href = '#'> Proyek 1 </a> | <a href = '#'> Proyek 2 </a>"
Tautan [5] = "<a href = '#'> Proyek 1 </a> | <a href = '#'> Proyek 2 </a> | <a href = '#'> Proyek 3 </a>"
Tautan [6] = "<a href = '#'> Proyek 1 </a> | <a href = '#'> Proyek 2 </a>"
Tautan [7] = "<a href = '#'> Proyek 1 </a> | <a href = '#'> Proyek 2 </a>"
tautan [8] = "<a href = '#'> Proyek 1 </a> | <a href = '#'> Proyek 2 </a>"
Tautan [9] = "<a href = '#'> Proyek 1 </a> | <a href = '#'> Proyek 2 </a>"
Tautan [10] = "<a href = '#'> Proyek 1 </a> | <a href = '#'> Proyek 2 </a>"
Tautan [11] = "<a href = '#'> Proyek 1 </a> | <a href = '#'> Proyek 2 </a>"
Tautan [12] = "<a href = '#'> Proyek 1 </a> | <a href = '#'> Proyek 2 </a>"
untuk (i = 0; i <liarr.length; i ++)
{
liarr [i] .onClick = function ()
{
Pilih ini (ini, Liarr, tautan)
}
}
}
Fungsi Pilih ini (IndexoBJ, Allli, Infoarr)
{
indeks var = 0;
untuk (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])
{
indeks = 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> Dunia Musik </li> <li> Flash </li>
</div>
<Div ID = "submenu"> Pengumuman Urusan Situs </div>
</body>
</html>
Saya harap artikel ini akan membantu pemrograman JavaScript semua orang.