代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
input {
background: white;
}
.active {
background: yellow;
}
div {
width: 200px;
height: 200px;
background: #ccc;
display: none;
}
</style>
<script>
window.onload = function(){
var aBtn = document.getElementsByTagName('input');
var aDiv = document.getElementsByTagName('div');
var i = 0;
for (var i = 0;i < aBtn.length;i++){
aBtn[i].index = i;
aBtn[i].onclick = function(){
for (i = 0;i < aBtn.length;i++){
aBtn[i].className = '';
aDiv[i].style.display = 'none';
}
aDiv[this.index].style.display = 'block';
this.className = 'active';
}
}
}
</script>
</head>
<body>
<input type="button" value="1" class="active" />
<input type="button" value="2"/>
<input type="button" value="3"/>
<div style="display: block;">1</div>
<div>2</div>
<div>3</div>
</body>
</html>
效果图
image.png
