<!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>
本文地址:https://blog.csdn.net/Wen_mou/article/details/107326820
如对本文有疑问, 点击进行留言回复!!
2020-07-21 html5如何监听veido的全屏 + css的字体间距 + JS的window.open() + 软技能svn与git
html+css+js适合前端小白的实战全解(超详细)——2048小游戏(二)
在使用@angular/cli创建的angular项目上添加postcss等一系列移动端自适应插件
网友评论