js 选项卡

啦啦啦啦啦能量变身

记得以前做课程设计的时候因为选项卡不会然后就没用这个功能，今天花了点时间做了下。

效果先贴上图片

贴上自己写的简单的选项卡

css

.active{
    background-color:#F93;
    }
.none{
    display:none;
    width:300px;
    height:150px;
    border:1px solid #F33;    
    }

html

<div id="c">
   <input type="button" class="active" value="文章">
   <input type="button" value="php">
   <input type="button" value="js">
   <div class="none" style="display:block">111</div>
   <div class="none">2222</div>
   <div class="none">3333</div>
   </div>

<script>
    window.onload=function(){
        var father=document.getElementById('c');//获取div
        var btn=father.getElementsByTagName('input');//获取div下的inpu
        var div1=father.getElementsByTagName('div');//获取div下的div

        for(var i=0;i<btn.length;i++){//循环每个按钮

                 btn[i].index=i;//btn[i]是指定button的第i个按钮;为该按钮添加一个index属性，并将index的值设置为

                 btn[i].onclick=function(){

                     for(var n=0;n<btn.length;n++){//循环去掉button的样式，把div隐藏

                         btn[n].className='';//清空按钮的样式
                         div1[n].style.display='none';//隐藏div
                         }

                     this.className='active';//自身添加active
                     div1[this.index].style.display='block';    //this.index是当前div = btn[i].index=i

                     }
            }
        }     
</script>