tab切换如何实现？
2019-10-20 本文已影响0人
阿油_爱周周
tab切换说白了就是用js实现二级菜单
思路就是给他点击事件然后运用排他思想，下面让我们来一起来完成这个实例
html样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="./css/tab.css">
</head>
<body>
<div class="wrapper">
<ul class="left">
<li class="active">沙雕</li>
<li>二笔</li>
<li>酒店</li>
<li>飞机</li>
<li>大炮</li>
<li>上海滩</li>
<li>狼奔</li>
<li>浪流</li>
</ul>
<ul class="right">
<li class="active2">谁他妈扔的炮仗</li>
<li>二笔你想点我呀</li>
<li>酒店你想点我呀</li>
<li>飞机你想点我呀</li>
<li>大炮你想点我呀</li>
<li>上海滩你想点我</li>
<li>狼奔你想点我呀</li>
<li>浪流你想点我呀</li>
</ul>
</div>
<script src="./tab.js"></script>
</body>
</html>
scss样式
*{
padding: 0;
margin: 0;
list-style: none;
}
@mixin whb($w,$h,$b){
width: $w;
height: $h;
background-color: $b;
}
.wrapper{
@include whb(400px,400px,#CCC);
border: 1px solid pink;
margin: 20px auto;
.left{
@include whb(100px,400px,purple);
float: left;
text-align: center;
&>li{
line-height: 50px;
color: white;
}
.active{
background: #ffffff;
color: black;
}
}
.right{
@include whb(300px,400px,blue);
float: left;
&>li{
display: none;
color: red;
}
.active2{
display: block;
}
}
}
js样式
//首先获取left和right下面的所有li
var left = document.querySelectorAll('.left li')
var right = document.querySelectorAll('.right li')
for(var i = 0;i < left.length;i++){ //循环ul
left[i].ind = i ;// 留下标记 保存下标
left[i].onclick=function(){ // 给left下的li绑定点击事件
for(var j = 0;j< left.length;j++){//遍历所有li
left[j].className='';//将 left[j]的类名设为空
right[j].className='';// 将right[j]的类名设为空
}
left[this.ind].className = 'active'//给左边当前li添加一个active1类名
right[this.ind].className = 'active2'//给右边当前li添加一个active1类名
}
}
下面就是实现的效果
image.png
