javascript代码（常规方式/面向过程）：

 

javascript代码（面向对象方式）：

window.οnlοad=function(){     new tabSwitch('div1');   }    var aLis=null;    var aDivs=null;    function tabSwitch(id){        var _this=this;        var oDiv1=document.getElementById(id);            this.aLis=oDiv1.getElementsByTagName('li');            this.aDivs=oDiv1.getElementsByTagName('div');                for(var i=0; i

 

简易HTML代码：

     
    
      
        
       
tabs01
        
       
tabs02
        
       
tabs03
        
       
tabs04
        
       
tabs05
    
      
    
      
       tabs01对应内容
      
    
      
       tabs02对应内容tabs02对应内容
      
    
      
       tabs03对应内容tabs03对应内容tabs03对应内容
      
    
      
       tabs04对应内容tabs04对应内容tabs04对应内容tabs04对应内容
      
    
      
       tabs05对应内容tabs05对应内容tabs05对应内容tabs05对应内容tabs05对应内容
      
     

 

简易css代码：

*{ margin:0; padding:0;}#div1{ margin-top:60px; margin-left:60px;}#div1 ul{ list-style:none;}#div1 ul li{ border-bottom:solid 1px #dcdcdc; float:left; margin-right:15px; display:block; height:30px; line-height:30px; text-align:center; padding:5px 10px; background-color:#f6f6f6; cursor:pointer;}.currentLi{ background-color:#dcdcdc!important;}#div1 div{ width:360px; background-color:#f6f6f6; height:100px; padding: 60px 20px;display:none;}