<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#box1,
#box2 {
width: 300px;
height: 300px;
margin: 20px auto;
border: #000 2px solid;
font-family: "微软雅黑";
}
#box1 a,
#box2 a {
display: block;
float: left;
width: 100px;
height: 40px;
line-height: 40px;
text-align: center;
background: green;
color: #fff;
text-decoration:none;
}
#box1 div,
#box2 div {
width: 300px;
height: 260px;
line-height:260px;
text-align: center;
font-size:40px;
display: none;
}
#box1 a.active,
#box2 a.active {
background: blue;
}
</style>
<script>
window.onload=function(){
tab('box1','onclick');
tab('box2','onmouseover');
};
function tab(id,sEv){
var oBox=document.getElementById(id);
var aBtn=oBox.getElementsByTagName('a');
var aDiv = oBox.getElementsByTagName('div');
for(var i=0;i<aBtn.length;i++){
aBtn[i].index=i;
aBtn[i][sEv]=function(){
for(var i=0;i<aBtn.length;i++){
aBtn[i].className='';
aDiv[i].style.display='none';
}
this.className='active';
aDiv[this.index].style.display='block';
}
}
}
</script>
</head>
<body>
<div id="box1">
<a href="javascript:;" class="active">按钮1</a>
<a href="javascript:;" >按钮2</a>
<a href="javascript:;" >按钮3</a>
<div style="display:block;">div1</div>
<div>div2</div>
<div>div3</div>
</div>
<div id="box2">
<a href="javascript:;" class="active">按钮1</a>
<a href="javascript:;" >按钮2</a>
<a href="javascript:;" >按钮3</a>
<div style="display:block;">div1</div>
<div>div2</div>
<div>div3</div>
</div>
</body>
</html>
