The examples in this article share the effect of js Tab tab switching for your reference. The specific content is as follows
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>tab</title> <style> *{margin:0; padding:0; list-style:none;} .box{ width: 1000px; overflow: hidden; margin:100px auto 0px; } #title{ line-height: 40px; background-color: rgb(247,247,247); font-size: 16px; font-weight: bold; color: rgb(102,102,102); overflow: hidden; } #title span{ float: left; width: 166px; text-align: center; } #title span:hover{ /*color: black;*/ cursor: pointer; } #content{ margin-top: 20px; } #content li{ width: 1050px; overflow: hidden; display: none; background-color: rgb(247,247,247); } #content li div{ width: 156px; margin-right: 14px; float: left; text-align: center; } #content li div a{ font-size: 14px; color: black; line-height: 14px; /* float: left;*/ display: inline-block; margin-top: 10px; } #content li a:hover{ color: #B70606; } #content li div span{ font-size: 16px; line-height: 16px; /*float: left;*/ display: block; color: rgb(102,102,102); margin-top: 10px; } #content img{ float: left; width: 155px; height: 250px; } #title .select{ background-color: rgb(10,167,112); color: white; } #content .show{ display: block; } </style></head><body> <div> <p id="title"> <span>Handsome</span> <span>Beauty</span> <span>Pet</span> <span>Movie</span> <span>League of Legends</span> <span>Music</span> </p> <ul id="content"> <li> <div><img src="images/shuaige1.jpg"><a href="#">Jason Statham</a><span>Rare and cool</span></div> <div><img src="images/shuaige2.jpg"><a href="#">Jason Statham</a><span>Rare and cool</span></div> <div><img src="images/shuaige3.jpg"><a href="#">Tom Cruise</a><span>High-end, atmospheric and high-end</span></div> <div><img src="images/shuaige4.jpg"><a href="#">Tom Cruise</a><span>High-end, atmospheric and high-end</span></div> <div><img src="images/shuaige4.jpg"><a href="#">Tom Cruise</a><span>High-end, atmospheric and high-end</span></div> <div><img src="images/shuaige4.jpg"><a href="#">Tom Cruise</a><span>High-end, atmospheric and high-end</span></div> <div><img src="images/shuaige4.jpg"><a href="#">Tom Cruise</a><span>High-end, atmospheric and high-end</span></div> <div><img src="images/shuaige4.jpg"><a href="#">Tom 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 has connotation</span></div> </li> <li> <div><img src="images/meinv1.jpg"><a href="#">Beauty</a><span>Furious outside and soft inside</span></div> <div><img 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="images/meinv4.jpg"><a href="#">Beauty</a><span>Cute pouting scissors</span></div> <div><img src="images/meinv5.jpg"><a href="#">Beauty</a><span>Fashionable, bright, fresh</span></div> <div><img src="images/meinv6.jpg"><a href="#">Beauty</a><span>Fashionable, bright, fresh</span></div> </li> <li> <div><img src="images/chongwu1.jpg"><a href="#">Pets</a><span>666 yuan per </span></div> <div><img src="images/chongwu2.jpeg"><a href="#">Pets</a><span>666 yuan per </span></div> <div><img src="images/chongwu3.jpg"><a href="#">Pets</a><span>666 yuan per </span></div> <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="images/chongwu6.jpg"><a href="#">Pets</a><span>666 pieces per </span></div> </li> <li> <div><img src="images/yingshi1.jpg"><a href="#">Harry Potter Series</a><span>Classics in the Classics</span></div> <div><img src="images/yingshi2.jpg"><a href="#">Classics in the Classics</span></div> <div><img src="images/yingshi2.jpg"><a href="#">Three fools make a fuss in Bollywood</a><span>Seeing tears collapsed</span></div> <div><img 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="images/yingshi5.jpeg"><a href="#">Tongchi</a><span>My chinchilla</span></div> <div><img src="images/yingshi6.jpg"><a href="#">Forrest Gump</a><span>Forrest Gump is still the same Forrest Gump</a></div> </li> <li> <div><img src="images/lol1.jpg"><a href="#">Ice Sagittarius</a><span>The Wife</span></div> <div><img src="images/lol2.jpg"><a href="#">Daughter of Darkness</a></div> <div><img 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="images/lol5.jpg"><a href="#">Turkish million</a><span>Deaths million million times a day. . </span></div> <div><img src="images/lol6.jpg"><a href="#">wewolves</a><span>Don't enlarge it for me</span></div> </li> <li> To be developed. . . </li> </ul> </div> <script> 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++) { 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>The key to this code is the last two for traversals and this pointer. The first for traversal is to add a click event for each span button, while the second for traversal is to determine which button is currently clicked. The corresponding content part is easy to control the appearance and hidden;
The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.