<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.active{background: red;}
</style>
</head>
<body>
<div id="box1" style="width: 200px;height: 200px;border:1px solid black;">
<input type="button" name="" id="" value="1" />
<input type="button" name="" id="" value="2" />
<input type="button" name="" id="" value="3" />
<div>11111</div>
<div style="display: none;">22222</div>
<div style="display:none;">33333</div>
</div>
</body>
<script>
function c(obj){
console.log(obj);
}
var parentElement = document.getElementById("box1");
var child1 = parentElement.getElementsByTagName("input");
var child2 = parentElement.getElementsByTagName("div");
for(var i = 0;i < child1.length;i++){
child1[i].index = i;
child1[i].onclick = function(){
for(var j = 0;j < child1.length;j++){
child1[j].className = "";
child2[j].style.display = 'none';
}
this.className = 'active';
child2[this.index].style.display = 'block';
}
}
</script>
</html>
选项卡
最新推荐文章于 2018-10-11 15:45:40 发布