事件：onclick
属性：display，className
用到for语句，index标记，this当前事件
先清空后附加
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="css1.css" rel="stylesheet" type="text/css"
charset="UTF-8">
</head>
<body>
<div id="div1">
<input class="active" type="button" value="服装"/>
<input type="button" value="家具"/>
<input type="button" value="运动"/>
<input type="button" value="提醒"/>
<div>女装，男装，童装</div>
<div>家具用品</div>
<div>户外运动</div>
<div>注意事项</div>
</div>
<script src="js1.js"> </script>
</body>
</html>
/////////////////css
#div1 .active{
background:yellow;
}
#div1 div{
width:200px;
height:200px;
border:1px red solid;
background:#ccc;
display:none;
}
/////////////////////////js
window.onload=function(){
var oDiv=document.getElementById("div1");
var oBtn=oDiv.getElementsByTagName("input");
var aDiv=oDiv.getElementsByTagName("div");
for(var i=0;i<oBtn.length;i++){
oBtn[i].index=i;
oBtn[i].onclick=function(){
for(var i=0;i<oBtn.length;i++){
oBtn[i].className="";
aDiv[i].style.display="none";
};
this.className="active";
aDiv[this.index].style.display="block";
};
}
};
