Este artigo descreve a implementação do JS de funções de menu de gerenciamento de plano de fundo editáveis. Compartilhe -o para sua referência, como segue:
<! xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> js js editável menu de fundo editável </title> <estilo) li, h2 {margem: 0; preenchimento: 0;} ul {estilo de lista: nenhum;}#top {width: 900px; Altura: 40px; margem: 0 automático; Background-Color: #CCCC00} #TOP H2 {Width: 150px; Altura: 40px; Background-Color: #99CC00; flutuar: esquerda; Size da fonte: 14px; Alinhamento de texto: centro; altura de linha: 40px;}#toptags {width: 750px; Altura: 40px; margem: 0 automático; Background-Color: #CCCC00; Float: Esquerda} #TOPTAGS ul li {float: esquerda; Largura: 100px; Altura: 25px; Margem-direita: 5px; exibição: bloco; Alinhamento de texto: centro; Cursor: Ponteiro; Top-top: 15px;}#main {width: 900px; Altura: 500px; margem: 0 automático; Background-color: #f5f7e6;} #leftmenu {width: 150px; Altura: 500px; Background-Color: #009900; Float: esquerda} #leftmenu ul {margin: 10px;}#leftmenu ul li {width: 130px; Altura: 30px; exibição: bloco; Antecedentes: #99CC00; Cursor: Ponteiro; altura de linha: 30px; Alinhamento de texto: centro; Margin-Bottom: 5px;} #LeftMenu ul li a {color: #000000; Decoração de texto: nenhum;}#Content {Width: 750px; Altura: 500px; Float: Esquerda} .Content {Width: 740px; Altura: 490px; Exibir: Nenhum; preenchimento: 5px; transbordamento-y: automático; altura de linha: 30px;}#Footer {largura: 900px; Altura: 30px; margem: 0 automático; Background-Color: #CCC; altura de linha: 30px; Text-align: Center;}. Content1 {Width: 740px; Altura: 490px; exibição: bloco; preenchimento: 5px; transbordamento-y: automático; Linha de linha: 30px;} </style> <script type = "text/javascript"> window.onload = function () {function $ (id) {return document.getElementById (id)} var menu = $ ("Menu do menu"). getElementsByTAgName ("ul") [0]; // topel "; var ck = $ ("leftmenu"). getElementsByTagName ("ul") [0] .getElementsByTagName ("li"); // menu esquerdo var j; // Clique no menu à esquerda para adicionar uma nova tag para (i = 0; i <ck.length; i ++) {ck [i] .OnClick = function () {$ ("Welcome"). Style.display = "nenhum" // Bem -vindo para ocultar Clearmenu (); this.style.background = "amarelo"; // loop para obter o índice atual para (j = 0; j <8; j ++) {if (this == ck [j]) {if ($ ("p"+j) == null) {OpenNew (j, this.innerhtml); // defina a tag para exibir texto} clearstyle (); $ ("p"+j) .style.backgroundcolor = "amarelo"; ClearContent (); $ ("c"+j) .style.display = "bloco"; }} retornar false; }} // Adicione ou exclua a função da tag OpenNew (id, nome) {var tagMenu = document.createElement ("li"); tagmenu.id = "p"+id; tagmenu.innerhtml = nome+""+"<img src = 'close.gif' style = 'vertical-align: médio'/>"; // Tag, clique em Evento TagMenu.OnClick = function (EVT) {ClearMenu (); ck [id] .style.background = "amarelo"; clearstyle (); tagmenu.style.backgroundColor = "Yellow"; ClearContent (); $ ("c"+id) .style.display = "bloco"; } // Feche o evento de clique na imagem no tagmenu.getElementsByTagName ("img") [0] .OnClick = function (evt) {evt = (evt)? if (evt.stopPropagation) {Evt.stopPropagation ()} // Cancelar o comportamento da bolha de ópera e safari; this.parentnode.parentnode.removeChild (tagmenu); // exclua a tag atual var color = tagmenu.style.backgroundColor; // Defina se você fechar uma tag, deixe a última tag obter foco se (color == "#ffff00" || color == "amarelo") {// Explicação do navegador de diferença de cor if (tags.lengths-1> = 0) {clearstyle (); tags [tags.length-1] .style.backgroundcolor = "amarelo"; ClearContent (); var cc = tags [tags.length-1] .id.split ("p"); $ ("c"+cc [1]). style.display = "bloco"; clearmenu (); ck [cc [1]]. style.background = "amarelo"; } else {ClearContent (); clearmenu (); $ ("Welcome"). style.display = "bloco"; }}} menu.appendChild (tagmenu); } // Função do estilo de menu limpo ClearMenu () {for (i = 0; i <ck.length; i ++) {ck [i] .style.background = "#99cc00"; }} // função de estilo de tag clear clearstyle () {for (i = 0; i <tags.length; i ++) {Menu.getElementsByTagName ("li") [i] .style.backgroundColor = "#ffcc00"; }} // Função de conteúdo limpa clearContent () {for (i = 0; i <7; i ++) {$ ("c"+i) .style.display = "nenhum"; }}} </script> </ading> <body> <div id = "top"> <h2> menu de gerenciamento </h2> <div id = "toptags"> <ul> </ul> </div> </div> <div id = "main"> <div = "leftmenu"> <ul> <li> nuligig. <li>Navigation 4</li> <li>Navigation 5</li> <li>Navigation 6</li> <li>Navigation 7</li> </ul> </div> <div id="content"> <div id="welcome" style="display:block;"> <div align="center"> <p> </p> <p><strong>Welcome</strong></p> <p> </p> </div> </div> <div id = "c0"> <a href = "###"> Navegação 1 </a> </div> <div id = "c1"> <a href = "###"> navegação 2 </a> </dd> <div id = "c2"> <a href = "###"> NAVAGIAGEM </AA> HREF = "###"> Navegação quatro conteúdos </a> </div> <div id = "c4"> <a href = "###"> Navegação cinco conteúdos </a> </div> <div id = "c5"> <a href = "###> Naveg. Conteúdo </a> </div> </div> </div> <div id = "rodapé"> copyright vevb.com </div> </body> </html>As renderizações da operação são as seguintes:
Clique aqui para baixar o código de exemplo completo.
Para obter mais informações sobre o conteúdo relacionado ao JavaScript, consulte os tópicos deste site: "Resumo das técnicas de operação da matriz de JavaScript", "Resumo dos métodos de uso de operação matemática de JavaScript", "Resumo de estruturas de dados de JavaScript e técnicas de algoritmo," Sumts of JavaScript Switching Techniques e Techniques "" Javascript Animation Efeitos e técnicas "," Resumo dos erros de JavaScript e técnicas de depuração "e" Resumo dos algoritmos e técnicas de travessia de JavaScript "
Espero que este artigo seja útil para a programação JavaScript de todos.