Эта статья разделяет эффект, когда мыши javaScript проводят, чтобы отобразить вторичное меню для вашей ссылки. Конкретный контент заключается в следующем
1. Код клавиши: используйте переключение или если высказывают операторы для изменения соответствующего режима отображения вторичного меню, чтобы заблокировать или нет
функция 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"; перерыв; ...}}2. Основное обязательное событие навигации
<ul>
<li> <a href = "#" onmouseover = "selecttabmenu (71)"> home </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> Меню горизонтального навигационного уровня </title> <style type = "text/css"> *{padding: 0px; поля: 0px; } .navbar {height: 30px; фоновый цвет: #2B383E; Текст-альбом: Центр; } ul {list-style: none; } .nav li {float: left; } .nav li a {display: block; Заполнение: 0 20px; Высота: 30px; высота линии: 30px; Текстовое декорация: нет; Цвет: #fff; } .nav li a: Hover {founal-color: #ffff; Цвет: #4db6e7} .tabmenucon {clear: оба; дисплей: нет; } .Tabmenucon li {display: inline block; } </style> <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"; case 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"; перерыв; case 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"; перерыв; case 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"; перерыв; case 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"; перерыв; case 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"; перерыв; }} </script> </head> <body> <div> <ul> <li> <a href = "#" onmouseover = "selecttabmenu (71)"> Home </a> </li> <li> <a href = "#" onmouseover = "selectTabmenu (72)"> о ассоциации </a> </li> <hrefmen onmouseover = "selecttabmenu (73)"> Новости ассоциации </a> </li> <li> <a href = "#" onmouseover = "selecttabmenu (74)"> Ассоциация </a> </li> <li> <a href = "#" href = "#" onmouseover = "selecttabmenu (76)"> пространство ресурсов </a> </li> </ul> </div> <div id = "tabmenucon"> <ul id = "tabmenucon71" </ul> <ul id = "tabmenucon72"> <li> Введение </li> <li> Информация </a> </li> </ul> <ul id = "tabmenucon72"> <li> Введение </li> <li> Организация </li> <li> Ассоциация </li> </ul> <ul id = " id="TabMenuCon73"> <li>Information</li> </ul> <ul id="TabMenuCon73"> <li>Information</li> </ul> <ul id="TabMenuCon74"> <li>Verdatory Maintenance Month</li> <li>Graphic Design Activities</li> <li>Program Design Activities</li> <li>Outdoor Expansion</li> </ul> <ul id = "tabmenucon75"> <li> Вход из членов </li> <li> Регистрация члена </li> <li> Плата за оплату члена </li> <li> Управление информацией о членах </li> <li> Модифицировать пароль </li> </ul> <ul id = "tabmenucon76"> <li> ps -обучающий </li> <li> flash tutorial </li> </li> </li> </li> </li> </li> </li> </li> </li> </li> </li> </li> </li> </li> </li> </li> </li> </li> </li> </li> </li> <li> </div> </body> </html>Выше приведено в этой статье, я надеюсь, что это будет полезно для каждого обучения.