Os exemplos deste artigo compartilham o efeito da comutação da guia JS para sua referência. O conteúdo específico é o seguinte
<! Doctype html> <html lang = "pt"> <head> <meta charset = "utf-8"> <title> tab </title> <style> *{margem: 0; preenchimento: 0; estilo de lista: nenhum;} .Box {Width: 1000px; estouro: oculto; Margem: 100px Auto 0px; } #title {altura de linha: 40px; Background-Color: RGB (247.247.247); Size da fonte: 16px; Peso da fonte: negrito; Cor: RGB (102.102.102); estouro: oculto; } #title span {float: esquerda; Largura: 166px; Alinhamento de texto: centro; } #title span: hover { /*cor: preto;* / cursor: pointer; } #content {margin-top: 20px; } #content li {width: 1050px; estouro: oculto; Exibir: Nenhum; Background-Color: RGB (247.247.247); } #content li div {width: 156px; Margem-direita: 14px; flutuar: esquerda; Alinhamento de texto: centro; } #content li div a {font-size: 14px; Cor: preto; altura da linha: 14px; /* Float: Esquerda;*/ Display: Block Inline; Margin-top: 10px; } #content li a: hover {color: #b70606; } #content li div span {font-size: 16px; altura da linha: 16px; /*float: esquerda;*/ display: bloco; Cor: RGB (102.102.102); Margin-top: 10px; } #Content iMg {float: esquerda; Largura: 155px; Altura: 250px; } #Title .Select {Background-Color: RGB (10.167.112); Cor: Branco; } #Content .Show {Display: Block; } </style> </head> <body> <div> <p id = "title"> <pan> Handsome </span> </span> beleza </span> <pan> PET </span> </span> filme </span> <pan> liga de legends </span> <span> Music </span> <ul) href = "#"> jason statham </a> <pan> raro e legal </span> </div> <div> <img src = "imagens/shuaige2.jpg"> <a href = "#"> jason statham </a> <span> raro </span> </div> href = "#"> Tom Cruise </a> <pan> sofisticado, atmosférico e sofisticado </span> </div> <div> <img src = "imaga src = "Images/shuaige4.jpg"> <a href = "#"> Tom Cruise </a> <pan> Hout-end, atmosférico e sofisticado </span> </div> <div> <img src = "imagens/shuaige4.jpg"> <a-href = "#"> </span> </div> <div> <img src = "imagens/shuaige4.jpg"> <a href = "#"> tom cruzeiro </a> <span> Hound-end, atmosférico e sofisticado </span> </div> <div> <img src = "imagens/shuaige4.jpg" Cruise </a> <pan> High-end, atmosférico e sofisticado </span> </div> <div> <img src = "imagens/shuaige5 href = "#"> Juan fu </a> <pan> Luxo de baixa chave tem conotação </span> </div> </li> <li> <div> <img src = "imagens/meinv1.jpg"> <a href = "#"> beleza </a> <burious brouious fora e soft </span src = "Images/meinv2.jpg"> <a href = "#"> beleza </a> <pan> Furioso por fora e suave dentro de </span> </div> <div> <img src = "imagens/meinv3.jpg"> <a href = "#"> beleza </a> <plan> fofineting " src = "Images/meinv4.jpg"> <a href = "#"> beleza </a> <span> tesoura de beicagem fofa </span> </div> <div> <img src = "imagens/meinv5.jpg"> <a href = "#"> beleza </a> <pan> moda, brilhante, brilhante, fresco "> src = "Images/meinv6.jpg"> <a href = "#"> beleza </a> <span> moda, brilhante e fresca </span> </div> </li> <li> <div> <img src = "imagens/chongwu1.jpg"> <a href = "#" <div> <img src = "Images/chongwu2.jpeg"> <a href = "#"> animais de estimação </a> <pan> 666 yuan por </span> </div> <div> <img src = "imagens/chongwu3.jpg"> <a href = "" "> <div> <img src = "Images/chongwu4.jpg"> <a href = "#"> Pets </a> <pan> 666 yuan por </span> </div> <div> <img src = "imagens/chongwu5.jpg"> <a href = ""> Pets <a src = "Images/chongwu6.jpg"> <a href = "#"> animais de estimação </a> <pan> 666 peças por </span> </div> </li> <li> <div> <img src = "imagens/yingshi1.jpg"> <a href = "#"> Harry Potter Potter <div> <img src = "Images/yingshi2.jpg"> <a href = "#"> clássicos nos clássicos </span> </div> <div> <img src = "imagens/yingshi2.jpg"> <a href = "#"> três bobos fazem uma fussa em Bollywood <aa> src = "Images/yingshi3.jpg"> <a href = "#"> Série de transformadores </a> <pan> emocionante e emocionante </span> </div> <div> <img src = "Images/yingshi4.jpg"> <a href = "#"> Shengyu chihiro <aa> <div> <img src = "Images/yingshi5.jpeg"> <a href = "#"> tongchi </a> <pan> meu chinchilla </span> </div> <div> <img src = "imagens/yingshi6.jpg"> <a href = "#"> forrest Gump Gump </a> </div> </li> <li> <div> <img src = "imagens/lol1.jpg"> <a href = "#"> gelo sagittarius </a> <pan> a esposa </span> </div> <div> <miMs src = "/lol2.jpg" <ahre> src = "Images/lol3.jpg"> <a href = "#"> explorer </a> <pan> Eu sou o mais bonito do jogo </span> </div> <div> <img src = "imagens/lol4.jpg"> <a href = "#"> staff </a> <planound> <lpin> <npg "> <a href ="#"> staff </a> <planound> <lpg"> <div> <img src = "imagens/lol5.jpg"> <a href = "#"> milhões de turcos </a> <span> mortes milhões de milhões de vezes por dia. . </span> </div> <div> <img src = "imagens/lol6.jpg"> <a href = "#"> wewolves </a> <pan> Não o amplie para mim </span> </div> </li> <li> para ser desenvolvido. . . </li> </ul> </div> <cript> var title = document.getElementById ('title'); var content = document.getElementById ('content'); var spans = title.getElementsByTagName ('span'); var lis = content.getElementsByTagName ('li'); for (var i = 0; i <spans.length; i ++) {vã [i] .index = i; vã [i] .OnClick = function () {for (var j = 0; j <spans.length; j ++) {sã [j] .className = ''; lis [j] .className = ''; } this.className = 'Selecione'; lis [this.index] .className = 'show'; }} </script> </body> </html>A chave para este código são os dois últimos para Traversals e este ponteiro. O primeiro para Traversal é adicionar um evento de clique para cada botão de intervalo, enquanto o segundo para Traversal é determinar qual botão é clicado no momento. A parte do conteúdo correspondente é fácil de controlar a aparência e oculta;
O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.