<html>
  <head>
    <title>选项卡</title>
     <style>
      #div1.active{background:yellow;}
      #div1 div{width:200px;height:200px;background:#CCC;border:1px;
solid #999;display:none;}
     </style>
     <script>
  window.onload=function()
   { 
         var oDiv=document.getElementById("div1");
         var abtn=oDiv.getElementsByTagName("input");
         var aDiv=oDiv.getElementsByTagNanme("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.classNanme="active";
             aDiv[this.index].style.display="bolck";
          } ;
       };
   };
     </script>
  </head>
   <body>
     <div id="div1">
      <input class="active" type="button" value="教育">
      <input type="button" value="招生">
      <input type="button" value="出国">
      <input type="button" value="培训">
       <div style="display:block;">111111</div>
       <div>222222</div>
       <div>33333</div>
       <div>44444</div>
     </div>
   </body>
</html>

解决方案 »

  1.   

    都直接用记事本写了还新人<html>
      <head>
        <title>选项卡</title>
         <style>
          #div1 .active{background:yellow;}
          #div1 div{width:200px;height:200px;background:#CCC;border:1px;
    solid #999;display:none;}
         </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="教育">
          <input type="button" value="招生">
          <input type="button" value="出国">
          <input type="button" value="培训">
           <div style="display:block;">111111</div>
           <div>222222</div>
           <div>33333</div>
           <div>44444</div>
         </div>
       </body>
    </html>