js写选项卡-tab切换
css代码
<style>
*{
margin: 0;
padding: 0;
}
ul li,ol li{
list-style: none;
}
.box{
width: 600px;
height: 400px;
border: 3px solid pink;
margin: 50px auto;
display: flex;
flex-direction: column;
}
.box>ul{
height: 60px;
display: flex;
}
.box>ul>li{
flex: 1;
color: #fff;
background-color: turquoise;
font-size: 30px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.box>ul>li.active{
background-color: orange;
}
.box>ol{
flex: 1;
position: relative;
}
.box>ol>li{
width: 100%;
height: 100%;
background-color: orangered;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
font-size: 100px;
position: absolute;
left: 0;
bottom: 0;
display: none;
}
.box>ol>li.active{
display: flex;
}
</style>
html代码
<div class="box">
<ul>
<li class="active">1</li>
<li>2</li>
<li>3</li>
</ul>
<ol>
<li class="active">1</li>
<li>2</li>
<li>3</li>
</ol>
</div>
js代码
<script>
//1.获取元素
var btns=document.querySelectorAll('ul>li')
var tabs=document.querySelectorAll('ol>li')
//2.给btns里所有按钮添加点击事件
btns.forEach(function(item,index){
item.onclick=function(){
//2.2 给btns和tabs里面所有内容取消active类名
btns.forEach(function(t,i){
t.className=''
tabs[i].className=''
})
//2.3 当前点击的按钮和对应的盒子添加active类名
item.className='active'
tabs[index].className='active'
}
})
</script>