Artikel ini membagikan efek mouse JavaScript yang menggesek untuk menampilkan menu sekunder untuk referensi Anda. Konten spesifiknya adalah sebagai berikut
1. Kode Kunci: Gunakan sakelar atau jika pernyataan penilaian untuk mengubah mode tampilan menu sekunder yang sesuai untuk memblokir atau tidak sama sekali
fungsi selecttabMenu (i) {switch (i) {case 71: document.geteLementById ("tabmenucon71"). style.display = "block"; document.geteLementById ("tabmenucon72"). style.display = "none"; document.geteLementById ("tabmenucon73"). style.display = "none"; document.geteLementById ("tabmenucon74"). style.display = "none"; document.geteLementById ("tabmenucon75"). style.display = "none"; document.geteLementById ("tabmenucon76"). style.display = "none"; merusak; ...}}2. Acara Binding Navigasi Utama
<ul>
<li> <a href = "#" onmouseover = "SelectTabMenu (71)"> home </a> </li>
3. Menu sekunder
<ul id = "tabmenucon71"> <li> <a href = "#"> pengumuman </a> </li> <li> << a href = "#"> Informasi </a> </li> </ul>
4. Kode lengkap
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <itement> menu level navigasi-detik horizontal </title> <style type = "text/css"> *{padding: 0px; margin: 0px; } .navbar {height: 30px; Latar Belakang-Color: #2B383E; Teks-Align: tengah; } ul {List-style: none; } .nav li {float: left; } .nav li a {display: block; padding: 0 20px; Tinggi: 30px; Line-Height: 30px; Dekorasi Teks: Tidak Ada; Warna: #fff; } .nav li A: Hover {latar belakang-warna: #ffff; Warna: #4db6e7} .tabmenucon {clear: keduanya; Tampilan: Tidak Ada; } .Tabmenucon li {display: inline-block; } </tyle> <script type = "text/javascript"> function selectTabMenu (i) {switch (i) {case 71: document.getElementById ("tabmenucon71"). style.display = "block"; document.geteLementById ("tabmenucon72"). style.display = "none"; document.geteLementById ("tabmenucon73"). style.display = "none"; document.geteLementById ("tabmenucon74"). style.display = "none"; document.geteLementById ("tabmenucon75"). style.display = "none"; document.geteLementById ("tabmenucon76"). style.display = "none"; Kasus 72: Document.getElementById ("TabMenucon71"). Style.Display = "None"; document.geteLementById ("tabmenucon72"). style.display = "block"; document.geteLementById ("tabmenucon73"). style.display = "none"; document.geteLementById ("tabmenucon74"). style.display = "none"; document.geteLementById ("tabmenucon75"). style.display = "none"; document.geteLementById ("tabmenucon76"). style.display = "none"; merusak; Kasus 73: document.getElementById ("tabmenucon71"). style.display = "none"; document.geteLementById ("tabmenucon72"). style.display = "none"; document.geteLementById ("tabmenucon73"). style.display = "block"; document.geteLementById ("tabmenucon74"). style.display = "none"; document.geteLementById ("tabmenucon75"). style.display = "none"; document.geteLementById ("tabmenucon76"). style.display = "none"; merusak; Kasus 74: document.getElementById ("tabmenucon71"). style.display = "none"; document.geteLementById ("tabmenucon72"). style.display = "none"; document.geteLementById ("tabmenucon73"). style.display = "none"; document.geteLementById ("tabmenucon74"). style.display = "block"; document.geteLementById ("tabmenucon75"). style.display = "none"; document.geteLementById ("tabmenucon76"). style.display = "none"; merusak; Kasus 75: Document.getElementById ("TabMenucon71"). Style.Display = "None"; document.geteLementById ("tabmenucon72"). style.display = "none"; document.geteLementById ("tabmenucon73"). style.display = "none"; document.geteLementById ("tabmenucon74"). style.display = "none"; document.geteLementById ("tabmenucon75"). style.display = "block"; document.geteLementById ("tabmenucon76"). style.display = "none"; merusak; Kasus 76: document.getElementById ("tabmenucon71"). style.display = "none"; document.geteLementById ("tabmenucon72"). style.display = "none"; document.geteLementById ("tabmenucon73"). style.display = "none"; document.geteLementById ("tabmenucon74"). style.display = "none"; document.geteLementById ("tabmenucon75"). style.display = "none"; document.geteLementById ("tabmenucon76"). style.display = "block"; merusak; } } </script></head><body> <div> <ul> <li><a href="#" onmouseover="selectTabMenu(71)">Home</a></li> <li><a href="#" onmouseover="selectTabMenu(72)">About the Association</a></li> <li><a href="#" OnmouseOver = "SelectTabmenu (73)"> Berita Asosiasi </a> </li> <li> <a href = "#" onmouseover = "selecttabmenu (74)"> Kegiatan asosiasi </a> </li> <li> <a href = "#" Onmouseover = "SelectTabManu (75) <a href"#" href = "#" onMouseOver = "selecttabmenu (76)"> Ruang Sumber Daya </a> </li> </ul> </div> <v id = "TabMenucon"> <ul id = "TabMenucon71"> <li> <a href = "#"> pengumuman </a> </li> <a> <" </ul> <ul id = "tabmenucon72"> <li> PENDAHULUAN </li> <li> Informasi </a> </li> </ul> <ul id = "TabMenucon72"> <li> PENDAHULUAN </li> <li> <li> <li> <li> Artikel Asosiasi </li> </ul> <li> <li> TABON "Li> <li> <li> </li> </ul> <li> TABOC </li> id = "tabmenucon73"> <li> Informasi </li> </ul> <ul id = "TabMenucon73"> <li> Informasi </li> </ul> <ul id = "TabMenucon74"> <li> Bulan Pemeliharaan Verdatory </li> <li> Kegiatan Desain Grafis </li> <li> Desain Program </Li> <li> Kegiatan Desain Grafis </li> Kegiatan Desain Program </Lier> <li> <li> id="TabMenuCon75"> <li>Member Login</li> <li>Member Registration</li> <li>Pay Member Fees</li> <li>Member Information Management</li> <li>Modify Password</li> </ul> <ul id="TabMenuCon76"> <li>PS Tutorial</li> <li>Flash Tutorial</li> </ul> </div> </body> </html>Di atas adalah semua tentang artikel ini, saya harap ini akan membantu untuk pembelajaran semua orang.