Este artículo describe la implementación JS de las funciones de menú de gestión de fondo editable. Compártelo para su referencia, como sigue:
< xmlns = "http://www.w3.org/1999/xhtml"> <fead> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <title> JS Menú de fondo editable </title> <style type = "text/css" li, h2 {margen: 0; Padding: 0;} UL {list-style: none;}#top {width: 900px; Altura: 40px; margen: 0 auto; Color de fondo: #cccc00} #top h2 {ancho: 150px; Altura: 40px; Color de fondo: #99CC00; flotante: izquierda; tamaño de fuente: 14px; Text-Align: Center; Línea-aguja: 40px;}#toptags {ancho: 750px; Altura: 40px; margen: 0 auto; Color de fondo: #CCCC00; float: izquierda} #Toptags ul li {float: izquierda; Ancho: 100px; Altura: 25px; margen-derecha: 5px; Pantalla: bloque; Text-Align: Center; cursor: puntero; Padding-top: 15px;}#main {ancho: 900px; Altura: 500px; margen: 0 auto; Color de fondo: #F5F7E6;} #LeftMenu {ancho: 150px; Altura: 500px; Color de fondo: #009900; float: izquierda} #leftmenu ul {margen: 10px;}#LeftMenu ul li {width: 130px; Altura: 30px; Pantalla: bloque; Antecedentes: #99CC00; cursor: puntero; Línea de altura: 30px; Text-Align: Center; Botón de margen: 5px;} #LeftMenu ul Li A {Color: #000000; Text-Decoration: None;}#Content {Width: 750px; Altura: 500px; flotante: izquierda} .content {ancho: 740px; Altura: 490px; Pantalla: ninguno; relleno: 5px; Overflow-y: Auto; Line-Height: 30px;}#pie de página {ancho: 900px; Altura: 30px; margen: 0 auto; Color de fondo: #CCC; Línea de altura: 30px; Text-Align: Center;}. Content1 {Width: 740px; Altura: 490px; Pantalla: bloque; relleno: 5px; Overflow-y: Auto; Line-Height: 30px;} </style> <script type = "text/javascript"> window.onload = function () {function $ (id) {return document.getElementById (id)} var menú = $ ("toptags"). getElementsBytagNagName var ck = $ ("LeftMenu"). GetElementsByTagName ("UL") [0] .getElementsByTagName ("li"); // menú izquierdo var j; // Haga clic en el menú a la izquierda para agregar una nueva etiqueta para (i = 0; i <ck.length; i ++) {ck [i] .onClick = function () {$ ("bienvenido"). Style.display = "none" // bienvenido a ocultar clearmenu (); this.style.background = "amarillo"; // bucle para obtener el índice actual para (j = 0; j <8; j ++) {if (this == ck [j]) {if ($ ("p"+j) == null) {openNew (j, this.innerhtml); // Establezca la etiqueta para mostrar el texto} ClearStyle (); $ ("P"+J) .Style.BackgroundColor = "Yellow"; ClearContent (); $ ("c"+j) .style.display = "bloque"; }} return false; }} // Agregar o eliminar la función de etiqueta OpenNew (id, nombre) {var tagMenu = document.createElement ("li"); tagMenu.id = "P"+id; tagMenu.innerhtml = name+""+"<img src = 'cero.gif' style = 'vertical-Align: Middle'/>"; // Etiqueta Haga clic en Evento TagMenu.OnClick = Function (EVT) {ClearMenu (); ck [id] .style.background = "amarillo"; ClearStyle (); tagmenu.style.backgroundcolor = "Yellow"; ClearContent (); $ ("c"+id) .style.display = "bloque"; } // Cierre el evento de clic de imagen en el tagMenu.getElementsBytagName ("img") [0] .Onclick = function (evt) {evt = (evt)? Evt: ((Window.event)? Window.event: null); if (evt.stoppropagation) {evt.stoppropagation ()} // Cancelar ópera y comportamiento de burbuja de Safari; this.parentnode.parentnode.removechild (tagMenu); // eliminar la etiqueta actual var color = tagMenu.style.backgroundcolor; // Establezca si cierra una etiqueta, deje que la última etiqueta obtenga Focus if (Color == "#FFFF00" || Color == "Yellow") {// Explicación del navegador de diferencia de color if (tags.length-1> = 0) {clareStyle (); Etiquetas [etiquetas ClearContent (); var cc = tags [tags.length-1] .id.split ("p"); $ ("c"+cc [1]). style.display = "bloque"; ClearMenu (); ck [cc [1]]. style.background = "amarillo"; } else {clearContent (); ClearMenu (); $ ("bienvenido"). style.display = "bloque"; }}} menú.appendChild (tagMenu); } // Clear Función de estilo de menú ClearMenu () {for (i = 0; i <ck.length; i ++) {ck [i] .style.background = "#99cc00"; }} // Clear Función de estilo de etiqueta ClearStyle () {for (i = 0; i <tags.length; i ++) {menu.getElementsByTagName ("li") [i] .style.backgroundcolor = "#ffccc00"; }} // Clear Content Function ClearContent () {for (i = 0; i <7; i ++) {$ ("C"+I) .style.display = "Ninguno"; }}} </script> </head> <body> <div id = "top"> <h2> menú de gestión </h. h2> <div id = "toptags"> <ul> </ul> </div> </div> <divi Id = "main"> <Div id = "LeftMenu"> <ul> <li> Navigation 1 </li> <li> Navigation 2 </li> </li> </li> <li> Navegación 4 </li> <li> Navegación 5 </li> <li> Navegación 6 </li> <li> Navigation 7 </li> </ul> </div> <div ID = "content"> <divi = "bienvenido" style = "display: block;"> <divenign = "centro"> <p> </p> <p> <p> </fuerte> </p> <p> <div id="c0"><a href="###">Navigation 1</a></div> <div id="c1"><a href="###">Navigation 2</a></div> <div id="c2"><a href="###">Navigation 3</a></div> <div id="c3"><a href = "###"> navegación cuatro contenidos </a> </div> <divi id = "c4"> <a href = "###"> navegación cinco contenidos </a> </div> <div id = "c5"> <a href = "###"> navegación seis contenidos </a> </div> <div Id = "c6"> <a href = "##. Contenido </a> </div> </div> </div> <div id = "pie"> copyright VEVB.com </div> </body> </html>Las representaciones de operación son las siguientes:
Haga clic aquí para descargar el código de ejemplo completo.
Para obtener más información sobre el contenido relacionado con JavaScript, consulte los temas de este sitio: "Resumen de las técnicas de operación de matriz de JavaScript", "Resumen de JavaScript Matemático Métodos de uso de la operación", "Resumen de las estructuras de datos de JavaScript y las técnicas de búsqueda de algoritmo de Javascripts", "Resumen de los efectos de conmutación de JavaScripts y técnicas", "Summary of JavaScript Algorithm Algorithm," Summary "," "," Summario de la técnica ",", "," Summary of JavaScript algorithm, "Summary", "Summary", "Summary", "Summary", ",", ",", ",", ",", ",", ",", ",", ",", ". Efectos y técnicas de animación de JavaScript "," Resumen de los errores de JavaScript y las técnicas de depuración "y" Resumen de los algoritmos y técnicas transversales de JavaScript "
Espero que este artículo sea útil para la programación de JavaScript de todos.