使用闭包创建tab切换,好处就是方便封装,当遇到一个页面有很多tab切换的时候,可以直接进行调用
html代码
<body>
<div class="box">
<ul>
<li class="bg">列表一</li>
<li>列表二</li>
<li>列表三</li>
<li>列表四</li>
<li>列表五</li>
</ul>
<h1 class="show"><img src="./imgs/1.jpg" alt=""></h1>
<h1><img src="./imgs/2.jpg" alt=""></h1>
<h1><img src="./imgs/3.jpg" alt=""></h1>
<h1><img src="./imgs/4.jpg" alt=""></h1>
<h1><img src="./imgs/5.jpg" alt=""></h1>
</div>
</body>
css代码
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
.box{
width: 500px;
/* height: 400px; */
margin: 20px auto;
border: 2px solid black;
}
.box ul{
display: flex;
justify-content: center;
}
li{
width: 99px;
line-height: 35px;
text-align: center;
background-color: rgb(171, 126, 126);
font-size: 15px;
font-weight: bold;
border-right: 1px solid pink;
cursor: pointer;
}
.bg{
background-color: violet !important;
}
h1{
display:none;
}
.show{
display: block !important;
}
img{
width: 500px;
}
</style>
js代码
制作
// 获取操作对象
let lis = document.querySelectorAll('li')
let hs = document.querySelectorAll('h1')
//遍历每个li,并添加点击事件
for(var i=0; i<lis.length; i++){
//添加点击事件并调用闭包函数
lis[i].onclick=fn1(i)
}
//创建闭包
function fn1(e){
return function(){
//利用排他思想清除li样式
for(var j=0; j<lis.length; j++){
lis[j].className=''
hs[j].className=''
}
//给点击的li和对应的hs标签添加样式
lis[e].className='bg'
hs[e].className='show'
}
}