Este artículo describe el método para implementar el efecto de conmutación del menú de pestaña por JS+CSS. Compártelo para su referencia. El método de implementación específico es el siguiente:
index.css es el siguiente:
Copie el código de la siguiente manera:* {
margen: 0px;
relleno: 0px;
}
cuerpo {
Ancho: 600px;
margen: 0 auto;
Color de fondo: plata;
}
#contanier {
Color de fondo: amarillo;
Ancho: 600px; altura: 400px;
}
#tabnavi {
Ancho: 600px; altura: 30px;
Color de fondo: #00BFFF;
Decoración de texto: ninguna;
Tipo de estilo de lista: Ninguno;
}
#tabnavi li {
flotante: izquierda;
margen-derecha: 7px;
Color de fondo: #008b8b;
Color: blanco;
cursor: puntero;
Ancho: 60px;
Altura: 28px;
Línea de altura: 30px;
Text-Align: Center;
}
#contenido {
Ancho: 600px; Altura: 370px;
Color de fondo: blanco;
}
Index.html es el siguiente:
Copie el código de la siguiente manera: <! DocType Html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<Evista>
<meta http-equiv = "content-type" content = "text/html; charset = utf-8"/>
<title> JS realiza el efecto de conmutación dinámica del menú Tab </title>
<link href = "css /index.css" rel = "stylesheet" />
<script type = "text/javaScript">
function gel (id) {
return document.getElementById (id);
}
var arr = [
{"Título": "Noticias", "Contenido": "Este es un canal de noticias"},
{"Título": "Financiero", "Contenido": "Este es el canal financiero"},
{"Título": "Entretenimiento", "Contenido": "Este es un canal de entretenimiento"},
{"Título": "Sports", "Content": "Este es un canal deportivo"},
{"Título": "Car", "Contenido": "Este es el canal de automóvil"},
{"Título": "Video", "Contenido": "Este es un canal de video"},
{"Título": "Vida", "Contenido": "Este es un canal de vida"}
];
window.onload = function () {
para (var i = 0; i <arr.length; i ++) {
var linew = document.createElement ("li");
linew.innerhtml = arr [i] .title;
gel ("Tabnavi"). AppendChild (Linew);
// BIND Eventos de clic en estos LIS, por lo que debe asignar una propiedad a cada uno de ellos (preferiblemente ID)
linew.setAttribute ("id", i);
linew.Onclick = function () {
var navs = gel ("Tabnavi"). Nodos infantiles;
// Borrar todos los colores
para (var j = 0; j <navs.length; j ++) {
if (navs [j] .nodeType == 1) {
Navs [j] .style.backgroundcolor = "#008b8b";
}
}
this.style.backgroundcolor = "rojo";
gel ("contenido"). innerhtml = arr [this.id] .content;
};
}
};
</script>
</ablo>
<Body>
<div id = "contanier">
<ul id = "tabnavi"> </ul>
<div id = "contenido"> </div>
</div>
</body>
</html>
Espero que este artículo sea útil para la programación de JavaScript de todos.