<html>
<head>
<meta charset="UTF-8">
<title>tab</title>
<style>
#div1 div {
width:200px;
height:200px;
border:1px red solid;
display:none;
}
.active {
background:red;
}
</style>
<script>
window.onload=function () {
var oDiv=document.getElementById('div1');
var aInput=oDiv.getElementsByTagName('input');
var aDiv=oDiv.getElementsByTagName('div');
for(var i = 0;i < aInput.length; i++){
aInput[i].index=i;
aInput[i].onclick=function () {
for(var i = 0;i < aInput.length; i++){
aInput[i].className ='';
aDiv[i].style.display='none' }
this.className ='active';
aDiv[this.index].style.display='block' }
} } </script>
</head>
<body>
<div id="div1">
<input type="button" value='1' class="active">
<input type="button" value='2'>
<input type="button" value='3'>
<div style='display: block;'>111</div>
<div>222</div>
<div>333</div>
</div>
</body>