<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.boders_s{
width: 167px;
height: 30px;
margin: 0 auto;
}
.borders{
width: 167px;
height: 200px;
margin: 0 auto;
}
.active{
border: 1px solid black;
}
.borders div{
display: none;
}
.borders .active{
display: block;
}
</style>
</head>
<body>
<div class='boders_s'>
<a href="javascript:;" class="active">行程</a>
<a href="javascript:;">中心</a>
<a href="javascript:;">角色</a>
<a href="javascript:;">定时</a>
</div>
<div class="borders">
<div class='active'>行程</div>
<div >中心</div>
<div>角色</div>
<div >定时</div>
</div>
<script>
/*
1.获取元素
2.绑定事件
3.把类切换到其他上面
*/
var active = document.querySelectorAll(".boders_s a")
var borders = document.querySelectorAll('.borders div')
for(var i=0; i<active.length;i++){
//自定义属性
active[i].index = i
active[i].onclick = function(){
//清除其他class 身上的 active
for(var j =0;j<active.length;j++){
active[j].className = ' '
}
this.classList.toggle('active')
// console.log(this.index)
for(var s=0;s<borders.length;s++){
borders[s].className = ''
}
borders[this.index].classList.toggle('active')
}
}
</script>
</body>
</html>
js 选项卡案例
最新推荐文章于 2023-06-20 11:16:50 发布