<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>选项卡</title>
</head>
<style>
div {
width: 200px;
height: 100px;
border: 1px solid red;
margin-top: 10px;
display: none;
}
</style>
<body>
<input type="button" id="" value="按钮1" / style="background: red;">
<input type="button" id="" value="按钮2" />
<input type="button" id="" value="按钮3" />
<div style="display: block;">选项1</div>
<div>选项2</div>
<div>选项3</div>
</body>
<script>
//首先加载事件
window.onload = function(){
var inputs = document.querySelectorAll("input");
var divs = document.querySelectorAll("div");
//循环每个button
for(var i = 0;i<inputs.length;i++){
inputs[i].onclick = function(){
for(var i=0;i<inputs.length;i++){
inputs[i].index = i;
inputs[i].style.background = ''
divs[i].style.display="none";
}
this.style.background = "red";
divs[this.index].style.display = "block";
}
}
}
</script>
</html>
网友评论