tab切换

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>tab切换</title>
   <link rel="stylesheet" href="css/reset.css">
   <style>
   body{
   text-align: center;
}
ul{
   456px;
   margin: 0 auto;
}
ul li{
   float: left;
   150px;
   height: 60px;
   line-height: 50px;
   border: 1px solid #eee;
}
.on{
   background-color: #eee;
   color: #fff;
}
.tab1,.tab2,.tab3{
   500px;
   height: 500px;
   margin: 0 auto;
}
.tab1{
   background-color: green;
}
.tab2{
   background-color: gray;
   display: none;
}
.tab3{
   background-color: red;
   display: none;
}
   </style>
</head>
<body>
   <ul class="clearfix">
       <li>111</li>
       <li>222</li>
       <li>333</li>
   </ul>
   <div class="tab1">第一张</div>
   <div class="tab2">第二张</div>
   <div class="tab3">第三张</div>
</body>
   <script>
   var oLi=document.getElementsByTagName('li');
   var oDiv=document.getElementsByTagName('div');
   for(var i=0;i<oLi.length;i++){
       oLi[i].index=i;
       oLi[i].onclick=function(){
           for(var i=0; i<oLi.length;i++){
              oLi[i].className='';
              oDiv[i].style.display='none';
           }
           this.className='on';
           oDiv[this.index].style.display='block';

       }
   }
</script></html>