<!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>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.control{
width: 300px;
height: 45px;
display: flex;
}
.control-item{
width: 100px;
height: 45px;
border: 1px solid red;
text-align: center;
line-height: 45px;
}
.content{
width: 300px;
height: 200px;
background-color: papayawhip;
}
.tab{
width: 100%;
height: 200px;
display: flex;
justify-content: center;
align-items: center;
font-size: 20px;
font-weight: 900;
display: none;
}
.show{
display: block;
}
.active{
background-color: tomato;
color: #f1f1f1;
}
</style>
</head>
<body>
<div class="wrap">
<div class="control">
<div class="control-item active">选项一</div>
<div class="control-item">选项二</div>
<div class="control-item">选择三</div>
</div>
<div class="content">
<div class="tab show">选项一，你好号</div>
<div class="tab">选项二，我和那后</div>
<div class="tab">选项三，看什么</div>
</div>
</div>
<script>
var control = document.querySelectorAll('.control-item');
var tab = document.querySelectorAll('.tab')
control = [...control];
tab = [...tab];
// 循环遍历control-item
control.forEach(function(item,index){
//给control-item添加点击事件
item.addEventListener('click',function(e){
// 循环遍历control-item 给他添加类名 为了覆盖第一个的show
control.forEach(function(item){
item.className = 'control-item'
})
tab.forEach(function(item){
item.className = 'tab'
})
this.className ='control-item active'; //this指向触发的元素
tab[index].className = 'tab show'
})
})
// 封装已给添加class类名的方法
// 第一步 把类名取出来
// 第二部 把类名添加进去 for
for(var i = 0;i<control.length;i++){
(function(){
var x = i;
control[i].onclick = function(){
var cname = item.className;
for(var j =0;j<control.length;j++){
control[j].className = cname
}
control[x].className = canme + 'active'
}
})()
}
</script>
</body>
</html>
本站文章版权归原作者及原出处所有 。内容为作者个人观点， 并不代表本站赞同其观点和对其真实性负责，本站只提供参考并不构成任何投资及应用建议。本站是一个个人学习交流的平台，网站上部分文章为转载，并不用于任何商业目的，我们已经尽可能的对作者和来源进行了通告，但是能力有限或疏忽，造成漏登，请及时联系我们，我们将根据著作权人的要求，立即更正或者删除有关内容。本站拥有对此声明的最终解释权。
