Contoh -contoh dalam artikel ini berbagi efek switching tab tab JS untuk referensi Anda. Konten spesifiknya adalah sebagai berikut
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <itement> tab </iteme> <tyle> *{margin: 0; Padding: 0; List-style: none;} .box {width: 1000px; meluap: tersembunyi; margin: 100px auto 0px; } #title {line-height: 40px; latar belakang-warna: RGB (247.247.247); font-size: 16px; font-weight: tebal; Warna: RGB (102.102.102); meluap: tersembunyi; } #title span {float: left; Lebar: 166px; Teks-Align: tengah; } #title span: hover { /*color: black;* / kursor: pointer; } #content {margin-top: 20px; } #content li {width: 1050px; meluap: tersembunyi; Tampilan: Tidak Ada; latar belakang-warna: RGB (247.247.247); } #content li div {width: 156px; margin-kanan: 14px; float: kiri; Teks-Align: tengah; } #content li div a {font-size: 14px; Warna: Hitam; Line-Height: 14px; /* float: kiri;*/ display: inline-block; margin-top: 10px; } #content li A: hover {color: #b70606; } #content li div span {font-size: 16px; Line-Height: 16px; /*float: kiri;*/ display: blok; Warna: RGB (102.102.102); margin-top: 10px; } #content img {float: left; Lebar: 155px; Tinggi: 250px; } #title .select {background-color: rgb (10.167.112); Warna: Putih; } #content .show {display: block; } </tyle> </head> <body> <dv> <p id = "title"> <span> tampan </span> <span> kecantikan </span> <span> Pet </span> <span> film </span> <span> liga legenda </span> <span> </span> </p> <ul id = "content"> </span> <span> </span> </p> <ul id id = "content"> <pan> <span> </span> </p> <ul id conten = "Content"> <pan> <span> </span> </p> <ul id conten "> </span> <span =" sprics = "sok =" iM = "IM =" IM = " href = "#"> Jason Statham </a> <span> langka dan keren </span> </div> <ver> <img src = "gambar/shuaige2.jpg"> <a href = "#"> Jason statham </a> <span> langka dan keren </span> </div> <iMg> <iMg> </piges = "SPANT> Langka dan keren </span> </div> <pan> <pan> <pan> <pan> <pan> <pan> <pan> </Img> <pites =" sHUCRE> SPANET dan COOL </span> </Div> </div> <iMg> <iMg = "sHURE> SPANT/SPANET dan COOL </span> </Div> </div> <iMG> <IMG> href = "#"> Tom Cruise </a> <span> high-end, atmosfer dan high-end </span> </div> <div> <img src = "gambar/shuaige4.jpg"> <a href = "#"> tom cruise </a> <span> high-end, atmosfer dan rentang high-end </end. src = "gambar/shuaige4.jpg"> <a href = "#"> tom cruise </a> <span> high-end, atmosfer, dan high-end </span> </div> <viv> <img src = "gambar/shuaige4.jpg"> <a href = "#"> cruise/shuaige> <a href = "#"> cruise/shuaige> <a href = "#"> cruise/shuaige> High-end </span> </div> <div> <img src = "gambar/shuaige4.jpg"> <a href = "#"> tom cruise </a> <span> high-end, atmosfer dan high-end </span> </div> <ver src = "gambar/shuaige4.jg> <piv> <piv> <mg src =" gambar/shuaige4. Cruise</a><span>High-end, atmospheric and high-end</span></div> <div><img src="images/shuaige5.jpg"><a href="#">Juan Fu</a><span>Low-key luxury has connotation</span></div> <div><img src="images/shuaige6.jpg"><a href = "#"> Juan fu </a> <span> Low-Key Luxury memiliki konotasi </span> </div> </li> <li> <verv> <img src = "gambar/meinv1.jpg"> <a href = "#"> Kecantikan </a> <pan> Furious Outside dan Soft Inside </Span> </SPAN> </#"> </a> </a> <span> FURUOUS OUTTER DAN SOMOD DI DALAM/SPAN> </SPAN> </SPAN> </SPAN> src="images/meinv2.jpg"><a href="#">Beauty</a><span>Furious outside and soft inside</span></div> <div><img src="images/meinv3.jpg"><a href="#">Beauty</a><span>Cute pouting scissors</span></div> <div><img src = "gambar/meinv4.jpg"> <a href = "#"> kecantikan </a> <span> gunting cemberut lucu </span> </div> <ver> <img src = "gambar/meinv5.jpg"> </href = "#"> kecantikan </a> </spaster, fashion, span> fesher, Bright, Bright, Bright/a href = "#"> kecantikan </a> </san> fashionable, Bright, Brigh/Bright/A Fresh </a href = "#" src = "gambar/meinv6.jpg"> <a href = "#"> kecantikan </a> <span> modis, cerah, segar </span> </div> </li> <li> <verv> <mmg src = "gambar/chongwu1.jpg"> <a href = "#"> piets </a> </ju> </yu per href = "#"> Pets </a> </l -span> </yu t -rp rentang </a> <a href = "#"> Pets </a> <aRE> <div> <img src = "gambar/chongwu2.jpeg"> <a href = "#"> hewan peliharaan </a> <span> 666 yuan per </span> </div> <viv> <mmg src = "gambar/chongwu3.jpg"> <a href = "#"> piets </a> <aRE> <66 yu> <a per href = "#"> Pets </A> <div> <img src = "gambar/chongwu4.jpg"> <a href = "#"> hewan peliharaan </a> <span> 666 yuan per </span> </div> <viv> <mmg src = "gambar/chongwu. src = "gambar/chongwu6.jpg"> <a href = "#"> hewan peliharaan </a> <span> 666 buah per </span> </div> </li> <li> <vli> <mmg src = "gambar/yingshi1.jpg"> <a href = "#"> Harry Potter/YingsHi1.jpg "> <a href ="#"> Harry Potter/YingsHi1.jpg"> <a href = "#"> HARRY POTTER/YINGSHI1.JPG "> <a href ="#"> HARRY POTTER/SPRINICS </jpg"> <a href = "#"> HARRY POTTER/SPRINICS </jpg "> <a href ="#" <dv> <img src = "gambar/yingshi2.jpg"> <a href = "#"> klasik dalam klasik </span> </div> <veR> <img src = "gambar/yingshi2 </vpg" </a> </a </a/kumparan </to/"> Tiga orang bodoh membuat bubur di bollywood </a> <a href ="#"> Tiga orang bodoh membuat fuss di bollywood </a> <a href ="#"> Tiga orang bodoh membuat rebutan di bollywood </a> </a> src="images/yingshi3.jpg"><a href="#">Transformers Series</a><span>Exciting and Exciting</span></div> <div><img src="images/yingshi4.jpg"><a href="#">Shengyu Chihiro</a><span>The little loli in the dream is so fresh</span></div> <div> <img src = "gambar/yingshi5.jpeg"> <a href = "#"> tongchi </a> <span> chinchilla saya </span> </div> <veR> <img src = "forrest/yingshi6.jpg"> <a href = "#"> forrest gembr </jpg "> <a href ="#"> forrest gembr </jpg"> <a href = "#"> forrest gund </sa> GUMP </a> </div> </li> <li> <div> <img src = "gambar/lol1.jpg"> <a href = "#"> es sagitarius </a> <span> istri </span> </div> <Div> <img src = "gambar/lol2.jpg"> </div> <v "#" Images = "Images/LOL2.JPG"> <a href = "DABERNES =" src="images/lol3.jpg"><a href="#">Explorer</a><span>I'm the Most Handsome in the Game</span></div> <div><img src="images/lol4.jpg"><a href="#">Staff</a><span>Torno</a><span>Turkish all-rounder</a></div> <div> <img src = "gambar/lol5.jpg"> <a href = "#"> Turki juta </a> <span> kematian juta juta kali sehari. . </span> </div> <div> <img src = "gambar/lol6.jpg"> <a href = "#"> wewolves </a> <span> jangan memperbesar untuk saya </span> </div> </li> <li> Untuk dikembangkan. . . </li> </ul> </div> <script> var title = document.geteLementById ('title'); var content = document.geteLementById ('content'); var spans = title.geteLementsByTagname ('span'); var lis = content.getElementsbyTagname ('li'); untuk (var i = 0; i <spans.length; i ++) {spans [i] .index = i; rentang [i] .onClick = function () {for (var j = 0; j <spans.length; j ++) {spans [j] .className = ''; lis [j] .className = ''; } this.className = 'pilih'; lis [this.index] .className = 'show'; }} </script> </body> </html>Kunci kode ini adalah dua yang terakhir untuk traversal dan penunjuk ini. Yang pertama untuk traversal adalah menambahkan acara klik untuk setiap tombol rentang, sedangkan yang kedua untuk traversal adalah untuk menentukan tombol mana yang saat ini diklik. Bagian konten yang sesuai mudah untuk mengontrol penampilan dan tersembunyi;
Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.