本文通过两种原生js方法实现tab选项卡切换功能
<!DOCTYPE html>
<html>
<head>
<title>tab选项卡</title>
<meta charset="utf-8">
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<style type="text/css">
li{list-style: none;}
*{
margin:0px;
padding:0px;
}
#tab{
position: relative;
width: 600px;
height: 400px;
margin:50px auto;
border: 1px solid #ccc;
}
.list_nav{
float: left;
width: 199px;
height: 50px;
border-right: 1px solid red;
background-color: #eee;
text-align: center;
line-height: 50px;
}
.active{
background-color: red;
}
.tab_nav{
display: none;
position: absolute;
top:50px;
width: 100%;
height: 350px;
}
.on{
display: block;
}
</style>
</head>
<body>
<div id="tab">
<ul class="list">
<li class="list_nav active">1</li>
<li class="list_nav">2</li>
<li class="list_nav">3</li>
</ul>
<ul class="tab">
<li class="tab_nav on">1</li>
<li class="tab_nav">2</li>
<li class="tab_nav">3</li>
</ul>
</div>
<script>
//js实现tab选项卡交互
//方法一:
var aList=document.getElementsByClassName("list_nav"),
aTab=document.getElementsByClassName("tab_nav"),
index=0; //用来存储上一次的值
for(var i=0;i<aList.length;i++){
//闭包加函数自执行
(function(i){
aList[i].onclick=function(){
aList[index].classList.remove("active");
aTab[index].classList.remove("on");
index=i;
aList[index].classList.add("active");
aTab[index].classList.add("on");
}
})(i);
}
//方法二:
var aList=document.getElementsByClassName("list_nav"),
aTab=document.getElementsByClassName("tab_nav");
for(var i=0;i<aList.length;i++){
aList[i].index=i;
//清除所有li的class
aList[i].onclick=function(){
for(var i=0;i<aList.length;i++){
aList[i].classList.remove("active");
aTab[i].classList.remove("on");
}
//给当前li添加样式
aList[this.index].classList.add("active");
aTab[this.index].classList.add("on");
}
}
</script>
</body>
</html>