Este artículo describe el método de implementación de la pestaña JS. Compártelo para su referencia. El análisis específico es el siguiente:
1. Ideas
1. Obtener elementos;
2. Agregue el evento OnClick o OnMouseMove al elemento del botón de bucle;
3. Al hacer clic en el botón actual, se mostrará en un estado resaltado. A través del bucle for, todos los estilos de botón están configurados para vaciar. Establezca la visualización de todos los divs en ninguno.
4. Haga clic en el botón actual para agregar estilo, mostrar el DIV actual y establecer la pantalla en bloque.
2. Código HTML:
<div id = "div1"> <input type = "button" value = "1"/> <input type = "button" value = "2"/> <input type = "button" value = "3"/> <input type = "button" value = "4"/> <div style = "visual
3. Parte de CSS:
.active {fondo:#9cc;}. div2 {ancho: 300px; altura: 200px; borde: 1px #66666 sólido; pantalla: ninguno;}4. Código JS:
<script> window.onload = function () {var odiv = document.getElementById ('div1'); // get div var btn = odiv.getElementsByTagName ('input'); // Obtener entrada var div2 = odiv.getElementsByTagName ('div'); // Obtener div for (i = 0; i <btn.length; i ++) btn [i] .index = i // btn [i] es el botón i-th del botón especificado; Agregue un atributo de índice al botón y establezca el valor de índice en i btn [i] .Onclick = function () // El evento i-th Click del botón {for (i = 0; i <btn.length; i ++) // bucle elimina el estilo del botón y oculta el diviSplay {btn [i] .className = '' '// borrar el estilo del botón Div2 [i].]. } this.classname = 'activo' // Agregar div2 activo [this.index] .style.display = 'block' // this.index es el div}}}}} </script>Espero que este artículo sea útil para la programación de JavaScript de todos.