js原生實現選項卡功能

標籤：for   樣式   需要   his   blog   功能   document   圖片   code   

選項卡在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樣式：

#box div{            width:200px;            height:200px;            background:#ccc;            display:none;        }        .on{            color:#fff;            background:green;        }

這樣我們可以得到一個靜態選項卡。

選項卡的思路是當我們點擊的當前的按鈕的時候，先清空所有的樣式，再給當前的按鈕和盒子添加樣式。

以下為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;        aBtn[i].onclick=function(){            for(var k=0;k<aBtn.length;k++){//先清空所有的樣式                aBtn[k].className =‘‘;                aDiv[k].style.display =‘none‘;            }            //給當前的按鈕和div添加樣式            this.className =‘on‘;            aDiv[this.index].style.display =‘block‘;        };    }</script>

 

js原生實現選項卡功能