精通javascript笔记(智能社)——简易tab选项卡及应用面向对象方法实现

<script type="text/javascript">
    window.onload=function(){        
        var oDiv1=document.getElementById('div1');  //获取外部div
        var aLis=oDiv1.getElementsByTagName('li');  //通过外部div获取li切换标签 
        var aDivs=oDiv1.getElementsByTagName('div'); //通过外部div获取tab标签对应的div内容
        
        for(var i=0; i<aLis.length;i++){
            aLis[i].index=i;  //为li切换标签添加一个自定义index属性
            aLis[i].onmouseover=function(){
                for(var j=0; j<aLis.length;j++){  //初始化所有li及内部div样式
                aLis[j].className=' ';
                aDivs[j].style.display='none';
            }
            this.className='currentLi';  //为当前li添加currentLis样式
            aDivs[this.index].style.display='block';   //让当前li所对应的div显示        
            }
        }        
    }
</script>

   window.onload=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<this.aLis.length;i++){
            this.aLis[i].index=i;
            this.aLis[i].onmouseover=function(){
                _this.tabs(this);  //通过_this指向div1而不是当前的aLis[i]对象,这里面的this指向的是aLis[i]对象
            }
        }        
    }
    tabSwitch.prototype.tabs=function(oLi){
        for(var j=0; j<this.aLis.length;j++){
            this.aLis[j].className='';
            this.aDivs[j].style.display='none';
        }
        oLi.className='currentLi';
        this.aDivs[oLi.index].style.display='block';                
    }

<div id="div1">
    <ul>
        <li class="currentLi">tabs01</li>
        <li>tabs02</li>
        <li>tabs03</li>
        <li>tabs04</li>
        <li>tabs05</li>
    </ul>
    <div style="display:block;">tabs01对应内容</div>
    <div>tabs02对应内容tabs02对应内容</div>
    <div>tabs03对应内容tabs03对应内容tabs03对应内容</div>
    <div>tabs04对应内容tabs04对应内容tabs04对应内容tabs04对应内容</div>
    <div>tabs05对应内容tabs05对应内容tabs05对应内容tabs05对应内容tabs05对应内容</div>
</div>