精通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;}