บทความนี้แบ่งปันผลกระทบของเมาส์ JavaScript ที่ปัดไปเพื่อแสดงเมนูรองสำหรับการอ้างอิงของคุณ เนื้อหาเฉพาะมีดังนี้
1. รหัสคีย์: ใช้สวิตช์หรือหากคำสั่งการตัดสินเพื่อเปลี่ยนโหมดแสดงเมนูรองที่สอดคล้องกันเป็นบล็อกหรือไม่มีใคร
ฟังก์ชั่น selectTabMenu (i) {switch (i) {กรณี 71: document.getElementById ("tabmenucon71"). style.display = "block"; document.getElementById ("tabmenucon72"). style.display = "ไม่มี"; document.getElementById ("tabmenucon73"). style.display = "ไม่มี"; document.getElementById ("tabmenucon74"). style.display = "ไม่มี"; document.getElementById ("tabmenucon75"). style.display = "ไม่มี"; document.getElementById ("tabmenucon76"). style.display = "ไม่มี"; หยุดพัก; -2. เหตุการณ์การเชื่อมโยงการนำทางหลัก
<ul>
<li> <a href = "#" onMouseOver = "SelectTabMenu (71)"> บ้าน </a> </li>
3. เมนูรอง
<ul id = "tabmenucon71"> <li> <a href = "#"> ประกาศ </a> </li> <li> << a href = "#"> ข้อมูล </a> </li></ul>
4. รหัสสมบูรณ์
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> เมนูระดับการนำทางแนวนอน-ระดับที่สอง มาร์จิ้น: 0px; } .navbar {ความสูง: 30px; พื้นหลังสี: #2B383E; TEXT-ALIGN: CENTER; } ul {list-style: none; } .nav li {float: ซ้าย; } .nav li a {display: block; Padding: 0 20px; ความสูง: 30px; ระดับความสูง: 30px; การตกแต่งข้อความ: ไม่มี; สี: #FFF; } .nav li a: hover {พื้นหลังสี: #ffff; สี: #4DB6E7} .tabmenucon {Clear: ทั้งสอง; แสดง: ไม่มี; } .tabmenucon li {display: inline-block; } </style> <script type = "text/javascript"> ฟังก์ชั่น selectTabMenu (i) {switch (i) {กรณี 71: document.getElementById ("tabmenucon71") style.display = "block"; document.getElementById ("tabmenucon72"). style.display = "ไม่มี"; document.getElementById ("tabmenucon73"). style.display = "ไม่มี"; document.getElementById ("tabmenucon74"). style.display = "ไม่มี"; document.getElementById ("tabmenucon75"). style.display = "ไม่มี"; document.getElementById ("tabmenucon76"). style.display = "ไม่มี"; กรณีที่ 72: document.getElementById ("tabmenucon71"). style.display = "ไม่มี"; document.getElementById ("tabmenucon72"). style.display = "block"; document.getElementById ("tabmenucon73"). style.display = "ไม่มี"; document.getElementById ("tabmenucon74"). style.display = "ไม่มี"; document.getElementById ("tabmenucon75"). style.display = "ไม่มี"; document.getElementById ("tabmenucon76"). style.display = "ไม่มี"; หยุดพัก; กรณีที่ 73: document.getElementById ("tabmenucon71"). style.display = "ไม่มี"; document.getElementById ("tabmenucon72"). style.display = "ไม่มี"; document.getElementById ("tabmenucon73"). style.display = "block"; document.getElementById ("tabmenucon74"). style.display = "ไม่มี"; document.getElementById ("tabmenucon75"). style.display = "ไม่มี"; document.getElementById ("tabmenucon76"). style.display = "ไม่มี"; หยุดพัก; กรณีที่ 74: document.getElementById ("tabmenucon71"). style.display = "ไม่มี"; document.getElementById ("tabmenucon72"). style.display = "ไม่มี"; document.getElementById ("tabmenucon73"). style.display = "ไม่มี"; document.getElementById ("tabmenucon74"). style.display = "block"; document.getElementById ("tabmenucon75"). style.display = "ไม่มี"; document.getElementById ("tabmenucon76"). style.display = "ไม่มี"; หยุดพัก; กรณีที่ 75: document.getElementById ("tabmenucon71"). style.display = "ไม่มี"; document.getElementById ("tabmenucon72"). style.display = "ไม่มี"; document.getElementById ("tabmenucon73"). style.display = "ไม่มี"; document.getElementById ("tabmenucon74"). style.display = "ไม่มี"; document.getElementById ("tabmenucon75"). style.display = "block"; document.getElementById ("tabmenucon76"). style.display = "ไม่มี"; หยุดพัก; กรณีที่ 76: document.getElementById ("tabmenucon71"). style.display = "ไม่มี"; document.getElementById ("tabmenucon72"). style.display = "ไม่มี"; document.getElementById ("tabmenucon73"). style.display = "ไม่มี"; document.getElementById ("tabmenucon74"). style.display = "ไม่มี"; document.getElementById ("tabmenucon75"). style.display = "ไม่มี"; document.getElementById ("tabmenucon76"). style.display = "block"; หยุดพัก; }} </script> </head> <body> <div> <ul> <li> <a href = "#" onMouseOver = "SelectTabMenu (71)"> บ้าน </a> </li> <li> <a href = "#" onMouseOver = "SelectTabMenu (73)"> ข่าวสมาคม </a> </li> <li> <a href = "#" onMouseOver = "SelectTabMenu (74)"> กิจกรรมการเชื่อมโยง </a> </li> <li> href = "#" onMouseOver = "SelectTabMenu (76)"> พื้นที่ทรัพยากร </a> </li></ul> </div> <div id = "tabmenucon"> <ul id = "tabmenucon71"> <li> </ul> <ul id = "tabmenucon72"> <li> บทนำ </li> <li> ข้อมูล </a> </li></ul><ul id = "Tabmenucon72"> <li> บทนำ </li> <li> องค์กร </li> <li> id = "tabmenucon73"> <li> ข้อมูล </li></ul><ul id = "tabmenucon73"> <li> ข้อมูล </li></ul><ul id = "Tabmenucon74"> <li> การบำรุงรักษา <li> <li> id = "tabmenucon75"> <li> สมาชิกเข้าสู่ระบบ </li> <li> การลงทะเบียนสมาชิก </li> <li> ค่าธรรมเนียมสมาชิกจ่าย </li> <li> การจัดการข้อมูลสมาชิก </li> <li> แก้ไขรหัสผ่าน </li></ul> <ul id = "TabMenucon76"> <li> </div> </body> </html>ข้างต้นเป็นเรื่องเกี่ยวกับบทความนี้ฉันหวังว่ามันจะเป็นประโยชน์กับการเรียนรู้ของทุกคน