原生js选项卡
思路:选项卡就是点击按钮切换到相应内容,其实就是点击按钮把内容通过display(block none)来实现切换的。
步骤:
1、首先获取元素。
2、for循环历遍按钮元素添加onclick 或者 onmousemove事件。
3、因为点击当前按钮时会以高亮状态显示,所以要再通过for循环历遍把所有的按钮样式设置为空和把所有DIV的display设置为none。
4、把当前按钮添加样式,把当前DIV显示出来,display设置为block。
废话不说直接上代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.main .content{
width: 200px;
height: 200px;
border: 1px solid #333;
font-size: 100px;
line-height: 200px;
text-align: center;
display: none;
border-radius: 100px;
color:#333333;
}
.main>.content:first-child{
background: #00FFFF;
}
.main>.content:nth-child(2){
background: greenyellow;
}
.main>.content:last-child{
background:fuchsia;
}
.active{
background: red;
}
.aaa{
color: #fff;
}
</style>
</head>
<body>
<div class="head">
<button class="aaa active">1</button>
<button class="aaa">2</button>
<button class="aaa">3</button>
</div>
<div class="main">
<div class="content" style="display: block;">1</div>
<div class="content">2</div>
<div class="content">3</div>
</div>
<script>
var btns=document.querySelectorAll(".head button");
var contents=document.querySelectorAll(".main .content");
for(var i=0;i<btns.length;i++){
btns[i].index=i;
btns[i].onclick=function(){
for(var i=0;i<btns.length;i++){
contents[i].style.display="none";
btns[i].className="";
}
contents[this.index].style.display="block";
this.className="active";
}
}
</script>
</body>
</html>