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

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

<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>

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

   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';
    }

简易HTML代码：

<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>

简易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;}