As shown below:
<!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 class="box">
<p >
<span class="select">handsome guy</span>
<span>Beauty</span>
<span>pet</span>
<span>Film and Television</span>
<span>League of Legends</span>
<span>music</span>
</p>
<ul >
<li class="show">
<div><img src="images/" alt="Handsome guy 1"><a href="#">Jason Statham</a><span>A cool cock</span></div> <div><img src="images/" alt="Handsome guy 2"><a href="#">Jason Statham</a><span>A cool cock</span></div> <div><img src="images/" alt="Handsome guy 3"><a href="#">Tom Cruise</a><span>High-end, atmospheric and high-end</span></div> <div><img src="images/" alt="Handsome guy 4"><a href="#">Tom Cruise</a><span>High-end, atmospheric and high-end</span></div> <div><img src="images/" alt="Handsome guy 5"><a href="#">Juan Fu</a><span>Low-key luxury has connotation</span></div> <div><img src="images/" alt="Handsome guy 6"><a href="#">Juan Fu</a><span>Low-key luxury has connotation</span></div> </li>
<li>
<div><img src="images/" alt="Beauty 1"><a href="#">Beauty</a><span>Furious outside and soft inside</span></div> <div><img src="images/" alt="Beauty 2"><a href="#">Beauty</a><span>Furious outside and soft inside</span></div> <div><img src="images/" alt="Beauty 3"><a href="#">Beauty</a><span>Cute pouting scissors hands</span></div> <div><img src="images/" alt="Beauty 4"><a href="#">Beauty</a><span>Cute pouting scissors hands</span></div> <div><img src="images/" alt="Beauty 5"><a href="#">Beauty</a><span>Fashionable, bright, fresh</span></div> <div><img src="images/" alt="Beauty 6"><a href="#">Beauty</a><span>Fashionable, bright, fresh</span></div> </li>
<li>
<div><img src="images/" alt="Pet 1"><a href="#">Pets</a><span>666 pieces per piece</span></div> <div><img src="images/" alt="Pet 2"><a href="#">Pets</a><span>666 pieces per piece</span></div> <div><img src="images/" alt="Pet 3"><a href="#">Pets</a><span>666 pieces per piece</span></div> <div><img src="images/" alt="Pet 4"><a href="#">Pets</a><span>666 pieces per piece</span></div> <div><img src="images/" alt="Pet 5"><a href="#">Pets</a><span>666 pieces per piece</span></div> <div><img src="images/" alt="Pet 6"><a href="#">Pets</a><span>666 pieces per piece</span></div> </li>
<li>
<div><img src="images/" alt="Movie and TV 1"><a href="#">Harry Potter Series</a><span>Classics</span></div> <div><img src="images/" alt="Movie and TV 2"><a href="#">Three fools make a big fuss in Bollywood</a><span>I burst into tears</span></div> <div><img src="images/" alt="Movie and TV 3"><a href="#">Transformers Series</a><span>Exciting and Enjoyable</span></div> <div><img src="images/" alt="Movie and TV 4"><a href="#">Spirited Chihiro</a><span>The little loli in the dream is so fresh</span></div> <div><img src="images/" alt="Movie and TV 5"><a href="#">Tongchi</a><span>My Tungchi Ahhh</span></div> <div><img src="images/" alt="Movie and TV 6"><a href="#">Forrest Gump</a><span>Forrest Gump is still the same Forrest Gump</a></div> </li>
<li>
<div><img src="images/" alt="lol1"><a href="#">Ice Sagittarius</a><span>The Barbarian King His Wife</span></div> <div><img src="images/" alt="lol2"><a href="#">Dark Daughter</a><span>A little loli</span></div> <div><img src="images/" alt="lol3"><a href="#">Explorer</a><span>I'm the coolest in the game</span></div> <div><img src="images/" alt="lol4"><a href="#">Staff</a><span>Top single Omnipotent</span></div> <div><img src="images/" alt="lol5"><a href="#">Timotti million</a><span>Deaths a million times a day.</span></div> <div><img src="images/" alt="lol6"><a href="#">Werewolf</a><span>Don't enlarge it for me</span></div> </li>
<li>
To be developed。。。
</li>
</ul>
</div>
<script>
var title=('title');
var content=('content');
var spans=('span');
var lis=('li');
for (var i = 0; i < ; i++) {
spans[i].index=i;
spans[i].onclick=function(){
for (var j = 0; j < ; j++) {
spans[j].className='';
lis[j].className='';
}
='select';
lis[].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 when it appears and hides.
The above Tab switching effect (recommended) commonly used in js is all the content I share with you. I hope you can give you a reference and I hope you can support me more.