<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
#div1 .active
{
background: yellow;
}
#div1 div
{
width: 200px;
height: 200px;
background: #808080;
border: 1px solid #f00;
display: none;
}
</style>
<script type="text/javascript">
window.onload = function () {
var oDiv = document.getElementById("div1");
var aBtn = oDiv.getElementsByTagName("input");
var aDiv = oDiv.getElementsByTagName("div");
for (var i = 0; i < aBtn.length; i++) {
//给每一个按钮增加一个Index属性
aBtn[i].index = i;
//给按钮增加事件
aBtn[i].onclick = function () {
//先把所有的btn的class改成无
for (var j = 0; j < aBtn.length; j++) {
aBtn[j].className = '';
aDiv[i].style.display = 'none';
}
//当前点击的按钮是this
this.className = "active";
alert(this.index);
//aDiv[this.index].style.display = 'block';
}
}
}
</script>
</head>
<body>
<div id="div1">
<input type="button" class="active" value="教育" />
<input type="button" value="培训" />
<input type="button" value="招生" />
<input type="button" value="出国" />
<div style="display: block">11111111</div>
<div>22222222</div>
<div>33333333</div>
<div>44444444</div>
</div>
</body>
</html>
