Este artigo compartilha o efeito do JavaScript Mouse passar para exibir o menu secundário para sua referência. O conteúdo específico é o seguinte
1. Código da chave: use o switch ou se declarações de julgamento para alterar o modo de exibição do menu secundário correspondente para bloquear ou nenhum
função selectTabMenu (i) {switch (i) {case 71: document.getElementById ("tabMenucon71"). style.display = "block"; document.getElementById ("TabMenucon72"). style.display = "nenhum"; document.getElementById ("TabMenucon73"). style.display = "nenhum"; document.getElementById ("TabMenucon74"). style.display = "nenhum"; document.getElementById ("TabMenucon75"). style.display = "nenhum"; document.getElementById ("TabMenucon76"). style.display = "nenhum"; quebrar; ...}}2. Evento de Ligação de Navegação Principal
<ul>
<li> <a href = "#" onmouseover = "selectTabmenu (71)"> home </a> </li>
3. Menu secundário
<ul id = "tabMenucon71"> <li> <a href = "#"> anúncio </a> </li> <li> << a href = "#"> informações </a> </li> </ul>
4. Código completo
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> Menu de nível de navegação-secundário horizontal </itit> <style type = "text/css"> *{padding: 0px; margem: 0px; } .navbar {altura: 30px; Background-Color: #2B383E; Alinhamento de texto: centro; } ul {estilo de listar: nenhum; } .nav li {float: esquerda; } .nav li a {display: block; preenchimento: 0 20px; Altura: 30px; altura de linha: 30px; Decoração de texto: Nenhum; Cor: #FFF; } .nav li a: hover {background-color: #ffff; Cor: #4db6e7} .tabmenucon {clear: ambos; Exibir: Nenhum; } .Tabmenucon li {display: inline-block; } </style> <script type = "text/javascript"> função selectTabMenu (i) {switch (i) {case 71: document.getElementById ("tabMenucon71"). style.display = "bloco"; document.getElementById ("TabMenucon72"). style.display = "nenhum"; document.getElementById ("TabMenucon73"). style.display = "nenhum"; document.getElementById ("TabMenucon74"). style.display = "nenhum"; document.getElementById ("TabMenucon75"). style.display = "nenhum"; document.getElementById ("TabMenucon76"). style.display = "nenhum"; Caso 72: document.getElementById ("TabMenucon71"). style.display = "nenhum"; document.getElementById ("TabMenucon72"). style.display = "bloco"; document.getElementById ("TabMenucon73"). style.display = "nenhum"; document.getElementById ("TabMenucon74"). style.display = "nenhum"; document.getElementById ("TabMenucon75"). style.display = "nenhum"; document.getElementById ("TabMenucon76"). style.display = "nenhum"; quebrar; Caso 73: document.getElementById ("TabMenucon71"). style.display = "nenhum"; document.getElementById ("TabMenucon72"). style.display = "nenhum"; document.getElementById ("TabMenucon73"). style.display = "bloco"; document.getElementById ("TabMenucon74"). style.display = "nenhum"; document.getElementById ("TabMenucon75"). style.display = "nenhum"; document.getElementById ("TabMenucon76"). style.display = "nenhum"; quebrar; Caso 74: document.getElementById ("TabMenucon71"). style.display = "nenhum"; document.getElementById ("TabMenucon72"). style.display = "nenhum"; document.getElementById ("TabMenucon73"). style.display = "nenhum"; document.getElementById ("TabMenucon74"). style.display = "bloco"; document.getElementById ("TabMenucon75"). style.display = "nenhum"; document.getElementById ("TabMenucon76"). style.display = "nenhum"; quebrar; Caso 75: document.getElementById ("TabMenucon71"). style.display = "nenhum"; document.getElementById ("TabMenucon72"). style.display = "nenhum"; document.getElementById ("TabMenucon73"). style.display = "nenhum"; document.getElementById ("TabMenucon74"). style.display = "nenhum"; document.getElementById ("TabMenucon75"). style.display = "bloco"; document.getElementById ("TabMenucon76"). style.display = "nenhum"; quebrar; Caso 76: document.getElementById ("TabMenucon71"). style.display = "nenhum"; document.getElementById ("TabMenucon72"). style.display = "nenhum"; document.getElementById ("TabMenucon73"). style.display = "nenhum"; document.getElementById ("TabMenucon74"). style.display = "nenhum"; document.getElementById ("TabMenucon75"). style.display = "nenhum"; document.getElementById ("TabMenucon76"). style.display = "bloco"; quebrar; }} </sCript> </head> <body> <div> <ul> <li> <a href = "#" onmouseover = "selectTabmenu (71)"> home </a> </li> <li> <a href = "#" onmouseover = "selecttabmenu (72)"> sobre a href = " onmouseover = "SelectTabmenu (73)"> News de associação </a> </li> <li> <a href = "#" onmouseover = "selectTabmenu (74)"> Atividades de associação </a> </li> <li> <a href = "#" onmouseover = "selectTabmenu (75)" href = "#" onmouseover = "selectTabmenu (76)"> espaço de recurso </a> </li> </ul> </div> <div id = "tabMenucon"> <ul id = "TabMenucon71"> <li> <a href = "#"> anúncio </a> </</li> </ul> <ul id = "TabMenucon72"> <li> Introdução </li> <li> Informações </a> </li> </ul> <ul id = "tabMenucon72"> <li> Introdução </li> <li> organização </li> <li> ARTICES </li> id = "TabMenucon73"> <li> Informações </li> </ul> <ul id = "TabMenucon73"> <li> Informações </li> </ul> <ul id = "TabMenucon74"> <li> Mês de manutenção verdatória </li> <li> <li> <li> <li> Programa atividades <li> Design do programa <li> Programa de manutenção verdatório <li> <li> <li> <li> <li> Design de concessão <li> Programa de design <li> Design de design de um design <li> Programa <li> Design do programa <li> Programa de manutenção verdatória </li> <li> <li> id = "TabMenucon75"> <li> Login de membro </li> <li> Registro de membros </li> <li> PAGAR TAXAS </li> <li> Gerenciamento de informações do membro </li> <li> Modificar senha </li> </li> <l id = "tabmenucon76/> <li> PS tutorial </Li> <li> <li> <li> <li> <ul Id =" Tabmenucon76/"> </div> </body> </html>O exposto acima é tudo sobre este artigo, espero que seja útil para o aprendizado de todos.