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{width: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>