使用原生js实现tab切换效果(简单易学)_js tabs拖动切换原生-CSDN博客

本文链接：https://blog.csdn.net/wz__QWERTY/article/details/123567126

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
margin: 0;
padding:0;
}
ul,li,ol{
list-style:none;
}
.box{
width:500px;
height:500px;
border:1px solid #000;margin: 0 auto;
}
.list{
width:500px;
height:60px;
border-bottom:1px solid #000;
}
.list>li{
width:100px;
height:60px;
float: left;
background-color:#ccc;
text-align: center;
line-height:60px;
margin:0px 0 0 52px;
}
.box>div{
width:500px;
height:439px;
display:none;
}
.box>.div1{
background-color:pink;
display:block;
}
.box>.div2{
background-color:palevioletred;
}
.box>.div3{
background-color: aqua;
}
</style>
</head>
<body>


<div class="box">
<ul class="list">
<li>首页</li>
<li>详情页</li>
<li>列表页</li>
</ul>
<div class="div div1">首页</div>
<div class="div div2">详情页</div>
<div class="div div3">列表页</div>
</div>


</body>
<script>
var oLis = document.getElementsByClassName("list")[0].children;
var oDivs = document.getElementsByClassName("div");


for(var i = 0; i < oLis.length; i++){
oLis[i].index = i; //为每一个元素储存下标


oLis[i].onclick = function(){    //给每一个元素绑定点击事件
console.log(this.index)
for(var j = 0; j < oDivs.length; j++){
oDivs[j].style.display = "none";     //显示之前先让所有元素都隐藏
}
oDivs[this.index].style.display = "block";
}
}
</script>
</html>