js原生实现选项卡效果

选项卡在js中是一个重要的存在。他没有那么难，但在工作中却有重要的位置。几乎在每一个网站都能看到选项卡的实例。所以今天写一下选项卡的实现。

我们设想有三个按钮分别来控制三个盒子当我们点击当前的按钮的时候，让对应的盒子显示，让其余的盒子隐藏。

废话不多说，直接上代码

首先来布局

<div id="box">

　　<input type="button" value="书籍" class="on">

　　<input type="button" value="图片">

　　<input type="button" value="专栏">

　　<div style="display:block;">书籍</div>

　　<div>图片</div>

　　<div>专栏</div>

</div>

当然有必要给他们添加样式，为实现选项卡的效果做准备

以下为css样式

<style>

　　#box div{200px;height:200px;background:#ccc;display:none;}

　　.on{color:#fff;background:red;}

</style>

这样我们可以得到一个静态的选项卡。

选项卡的思路是当我们点击的当前的按钮的时候，先清空所有的样式，再给当前的按钮和盒子添加样式。

以下为js代码

<script>

　　//获取元素

　　var oBox=document.getElementById("box");

　　var aBtn=oBox.getElementsByTagName("input");

　　var aDiv=oBox.getElementsByTagName("div");

　　

　　//aBtn是一组元素，所以需要用到for循环

　　for(var i=0;i<aBtn.length;i++){

　　　　aBtn[i].index=i;//这里需要了解浏览器加载代码的执行顺序，首先是加载html标签属性，然后过滤自定义的属性，最后加载js。了解了浏览器的加载过程，就可以了解我们在执行js代码的时候给每一个按钮加上自定义属性，因为这样就不会被过滤掉了。并且可以让div的下标等于btn的下标

　　　　aBtn[i].onclick=function(){

　　　　　　for(var i=0;i<aBtn.length;i++){//先清空所有的样式

　　　　　　　　aBtn[i].className='';

　　　　　　　　aDiv[i].style.display='none';

　　　　　　}

　　　　　　//给当前的按钮和div添加样式

　　　　　　this.className='on';

　　　　　　aDiv[this.index].style.display='block';　

　　　　};

　　}

</script>