选项卡.html

 <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Page Title</title>
    <style>
    #div1 .active{background: yellow;}
    #div1 div{
     width: 200px;
     height: 200px;
     border: 1px solid #999;
     display: none;
     background: #CCC;
 }
    </style>
    <script>
        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++){
                aBtn[i].index=i;
                aBtn[i].onclick=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="div1">
  <input class="active" type="button"value="教育"index="0">
  <input  type="button"value="培训"index="1">
  <input  type="button"value="出国"index="2">
  <input  type="button"value="招生"index="3">
  <div style="display:block">1111</div>
  <div>2222</div>
  <div>3333</div>
  <div>4444</div>
  </div>
</body>
</html>