<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.bigbox{
width: 600px;
height: 500px;
border: 1px solid #008000;
margin: 0 auto;
}
.bigbox>button{
width: 200px;
height: 50px;
float: left;
}
.bigbox>.box{
width: 600px;
height: 450px;
margin-top: 50px;
position: absolute;
}
.box:nth-child(4){
background-color: red;
}
.box:nth-child(5){
background-color: blue;
}
.box:nth-child(6){
background-color: green;
}
</style>
<body>
<div class="bigbox">
<button type="button">红色</button>
<button type="button">蓝色</button>
<button type="button">绿色</button>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</body>
<script type="text/javascript">
var obtn=document.querySelectorAll("button")
var obox=document.querySelectorAll(".box")
for(a=0;a<obtn.length;a++){
//把a这个下标存储到index中
obtn[a].index=a;
//给所有的按钮绑定一个点击事件
obtn[a].onclick=function(){
//循环所有的按钮进行隐藏
for(c=0;c<obox.length;c++){
obox[c].style.display="none"
}
//跟按钮下标对应的div显示
obox[this.index].style.display="block"
}
}
</script>
</html>
HTML+CSS+JS做简易三色卡
最新推荐文章于 2024-03-14 17:16:26 发布