Los ejemplos en este artículo comparten el efecto del cambio de pestaña JS para su referencia. El contenido específico es el siguiente
<! DocType html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> tab </title> <style> *{margin: 0; relleno: 0; estilo list: ninguno;} .Box {ancho: 1000px; desbordamiento: oculto; Margen: 100px Auto 0px; } #title {Line-Hieight: 40px; Color de fondo: RGB (247,247,247); tamaño de fuente: 16px; Font-Weight: Bold; Color: RGB (102,102,102); desbordamiento: oculto; } #title span {float: izquierda; Ancho: 166px; Text-Align: Center; } #title span: hover { /*color: negro;* / cursor: pointer; } #content {margin-top: 20px; } #content li {ancho: 1050px; desbordamiento: oculto; Pantalla: ninguno; Color de fondo: RGB (247,247,247); } #content li div {ancho: 156px; margen-derecha: 14px; flotante: izquierda; Text-Align: Center; } #content li div a {font-size: 14px; Color: negro; Línea de altura: 14px; /* float: izquierda;*/ Display: Inline-Block; margen-top: 10px; } #content li a: hover {color: #b70606; } #content li div span {font-size: 16px; Línea de altura: 16px; /*float: izquierda;*/ Display: bloque; Color: RGB (102,102,102); margen-top: 10px; } #content img {float: izquierda; Ancho: 155px; Altura: 250px; } #title .select {Background-Color: RGB (10,167,112); Color: blanco; } #content .show {display: block; } </style> </head> <body> <div> <p id = "title"> <span> guapo </span> <span> belleza </span> <span> mascit. href = "#"> Jason Statham </a> <span> raro y cool </span> </div> <div> <img src = "imágenes/shuaige2.jpg"> <a href = "#"> jason statham </a> <span> raro y cool </div> <div> <img src = "imágenes/shuage href = "#"> Tom Cruise </a> <span> High-end, atmosférico y alto-end </span> </div> <div> <img src = "Images/shuaige4.jpg"> <a href = "#"> Tom Cruise </a> <span> Alto, atmosférico y alto-gord src = "Images/shuaige4.jpg"> <a href = "#"> Tom Cruise </a> <span> High-end, atmosférico y alto-end </span> </div> <div> <img src = "Images/shuaige4.jpg"> <a href = "#"> Tom Cruise </a> <span> high High-End </span> </div> <iv> <img src = "Images/shuaige4.jpg"> <a href = "#"> Tom Cruise </a> <span> High-end, atmosférico y alto-end </span> </div> <div> <img src = "Images/shuaige4.jpg"> <a href = "#"#"#" Cruise </a> <span> High-end, atmosférico y de alta gama </span> </div> <div> <img src = "Images/shuaige5.jpg"> <a href = "#"> juan fu </a> <span> bajo llave de lujo tiene una connotación </span> </div> <div> <img src = "Images/shUaige6.jpg" href = "#"> Juan fu </a> <span> Luxury de llave baja tiene connotación </span> </iv> </li> <li> <div> <mit <img src = "Images/meinv1.jpg"> <a href = "#"> belleza </a> <span> furioso exterior y suave dentro de </span> </iv> <iv> <imggg src = "imágenes/meinv2.jpg"> <a href = "#"> belleza </a> <span> furioso exterior y suave dentro de </span> </div> <div> <mit <img src = "Images/meinv3.jpg"> <a href = "#"> belleza </a> <span> lindos con tijeras de componentes </sppis> <viv> <iv> <Miv> <Miv> src = "imágenes/meinv4.jpg"> <a href = "#"> belleza </a> <span> lindas tijeras de pucheros </span> </div> <div> <div> <img src = "Images/meinv5.jpg"> <a href = "#"> belleza </a> <span> de moda, brillante, fresca </span> </siv> <iv> <mit> src = "imágenes/meinv6.jpg"> <a href = "#"> belleza </a> <span> fashionable, brillante, fresco </span> </div> </li> <li> <div> <img src = "imágenes/chongwu1.jpg"> <a href = "#"> pets </a> <sps> 666 yuan <Div> <img src = "imágenes/chongwu2.jpeg"> <a href = "#"> mascotas </a> <span> 666 yuan por </span> </div> <div> <img src = "imágenes/chongwu3.jpg"> <a href = "#"> pets </a> <sps> 666 yuan pros <div><img src="images/chongwu4.jpg"><a href="#">Pets</a><span>666 yuan per </span></div> <div><img src="images/chongwu5.jpg"><a href="#">Pets</a><span>666 pieces per </span></div> <div><img src = "imágenes/chongwu6.jpg"> <a href = "#"> mascotas </a> <span> 666 piezas por </span> </div> </li> <li> <div> <img src = "Images/yingshi1.jpg"> <a href = "#"> harry series </a> <span> Classics in the Classics in the Classics in the Classics in the Classics in the Classics in the Classics in the Classics in the Classics in the Classics in the Classics in the Classics in the Classics in the Classics the Classics in the Classics the Classics the Classic <div> <img src = "images/yingshi2.jpg"> <a href = "#"> clásicos en los clásicos </span> </div> <div> <img src = "Images/yingshi2.jpg"> <a href = "#"> Tres tontos hacen un alboroto en bollywood </a> <span> viendo lágrimas </span </span </divit </divs> </divs> </div> </iMg> </iMg </iMg </IMG </IMG Div. src = "imágenes/yingshi3.jpg"> <a href = "#"> Serie de transformadores </a> <span> emocionante y emocionante </span> </div> <div> <mit <img src = "Images/yingshi4.jpg"> <a href = "#"> shengyu chihiro </a> <span> el pequeño loli en el sueño es tan de nuevo </span </span </span </span </span </divi <div> <img src = "imágenes/yingshi5.jpeg"> <a href = "#"> tongchi </a> <span> my chinchilla </span> </div> <div> <img src = "images/yingshi6.jpg"> <a href = "#"> freest gump </a> <spps> forrest gump igualmente es sigue siendo el forrest forrest es sigue siendo el mismo es la multa es la misma para el gump iguales es el multo es el mismo para Gump </a> </div> </li> <li> <div> <img src = "images/lol1.jpg"> <a href = "#"> Ice Sagitario </a> <span> la esposa </span> </div> <div> <img src = "imágenes/lol2.jpg"> <a href = "#" src = "imágenes/lol3.jpg"> <a href = "#"> Explorer </a> <span> Soy el más guapo en el juego </span> </div> <iv> <div> <img src = "Images/lol4.jpg"> <a href = "#"> personal </a> <span> torno </a> <span> Turkish All-Rounder </hiS> <Div> <img src = "imágenes/lol5.jpg"> <a href = "#"> Millones turcos </a> <span> muertes millones de veces al día. . </span> </div> <div> <img src = "imágenes/lol6.jpg"> <a href = "#"> wewolves </a> <span> No lo agranden para mí </span> </div> </li> <li> para ser desarrollado. . . </li> </ul> </div> <script> var title = document.getElementById ('title'); var content = document.getElementById ('contenido'); var spans = title.getElementsBytagName ('span'); var lis = content.getElementsBytagName ('li'); para (var i = 0; i <spans.length; i ++) {spans [i] .index = i; SPANS [i] .Onclick = function () {for (var j = 0; j <spans.length; j ++) {spans [j] .classname = ''; lis [j] .classname = ''; } this.classname = 'select'; lis [this.index] .classname = 'show'; }} </script> </body> </html>La clave de este código son los dos últimos para los recorridos y este puntero. El primero para el recorrido es agregar un evento de clic para cada botón de tramo, mientras que el segundo para el recorrido es determinar en qué botón se hace clic actualmente. La parte de contenido correspondiente es fácil de controlar la apariencia y oculta;
Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.