<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{font-family: "Microsoft YaHei",serif;}
body,dl,dd,p,h1,h2,h3,h4,h5,h6{margin: 0;}
ol,ul,li{margin: 0;padding: 0;list-style: none;}
img{border: none}
#wrap{
width: 430px;
height: 240px;
margin: 50px auto;
user-select: none;
}
#wrap .leftTab{
float: left;
width: 100px;
height: 100%;
}
#wrap .leftTab li{
width: 100%;
height: 30px;
line-height: 30px;
text-align: center;
background-color: #000;
color: #fff;
font-size: 12px;
margin-bottom: 2px;
cursor: pointer;
}
#wrap .leftTab li.on{
background-color: #f60;
}
#wrap .content{
position: relative;
float: right;
width: 320px;
height: 200px;
}
#wrap .content .right{
display: none;
position: absolute;
top: 0;
left: 0;
width: 320px;
height: 240px;
}
#wrap .content .right.on{
display: block;
}
#wrap .content .right ul.img{
position: relative;
width: 100%;
height: 100%;
}
#wrap .content .right ul.img li{
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#wrap .content .right ul.img li.on{
display: block;
}
#wrap .content .right ul.tab{
position: absolute;
bottom: 5px;
left: 10px;
width: 100%;
height: 70px;
}
#wrap .content .right ul.tab li{
float: left;
width: 30px;
height: 30px;
background-color: #000;
color: #fff;
line-height: 30px;
text-align: center;
font-size: 12px;
margin-right: 10px;
cursor: pointer;
}
#wrap .content .right ul.tab li.on{
background-color: #f60;
}
#wrap .content .right .img li img{
width: 320px;
height: 200px;
}
</style>
</head>
<body>
<div id="wrap">
<!--左侧tab按钮-->
<div class="leftTab">
<ul>
<li class="on">豪车</li>
<li>美味</li>
<li>美女风景</li>
</ul>
</div>
<!--右侧图片区-->
<div class="content">
<div class="right on">
<!--豪车-->
<ul class="img">
<li class="on"><img src="img/1.jpg" alt=""></li>
<li><img src="img/2.jpg" alt=""></li>
<li><img src="img/3.jpg" alt=""></li>
<li><img src="img/4.jpg" alt=""></li>
</ul>
<ul class="tab">
<li class="on">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<!--美食-->
<div class="right">
<ul class="img">
<li class="on"><img src="img/5.jpg" alt=""></li>
<li><img src="img/6.jpg" alt=""></li>
<li><img src="img/7.jpg" alt=""></li>
<li><img src="img/8.jpg" alt=""></li>
<li><img src="img/9.png" alt=""></li>
</ul>
<ul class="tab">
<li class="on">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
<!--美女-->
<div class="right">
<ul class="img">
<li class="on"><img src="img/10.jpg" alt=""></li>
<li><img src="img/11.jpg" alt=""></li>
<li><img src="img/12.jpg" alt=""></li>
<li><img src="img/13.jpg" alt=""></li>
<li><img src="img/14.jpg" alt=""></li>
<li><img src="img/15.jpg" alt=""></li>
</ul>
<ul class="tab">
<li class="on">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</div>
</div>
</div>
<script>
(function () {
let aLeftTab = document.querySelectorAll("#wrap .leftTab li"),
aRightContent = document.querySelectorAll("#wrap .content .right"),
aImg = document.querySelectorAll("#wrap .right .img"),
aTab = document.querySelectorAll("#wrap .right .tab"),
index = 0,//用来辨别左右大的选项卡对应的显示序号
len = aLeftTab.length;
function leftTab(i) {
//左侧tab控制右侧content的内容
aLeftTab[i].onclick = function () {
if (index === i) return;
aLeftTab[index].className = "";
aRightContent[index].className = "right";
index = i;
aLeftTab[index].className = "on";
aRightContent[index].className = "right on";
};
}
function rightTab(i) {
//右侧每一块都初始添加tab控制img时间
let aImgLi = aImg[i].querySelectorAll("li"),
aTabLi = aTab[i].querySelectorAll("li"),
len1 = aImgLi.length,
index1 = 0;
for (let j=0;j<len1;j++) {
aTabLi[j].onclick = function () {
if (j===index1)return;
aImgLi[index1].className = "";
aTabLi[index1].className = "";
index1=j;
aImgLi[index1].className = "on";
aTabLi[index1].className = "on";
}
}
}
for (let i=0;i<len;i++) {
leftTab(i);
rightTab(i);
}
})();
//左侧值关注右侧的内容，重复点击的时候会造成资源浪费
//我们直接就把所有的对应好了放在那里 所以用到了右侧也用到了for
</script>
</body>
</html>
来源：https://www.cnblogs.com/zhangyu666/p/11479748.html