js原生選項卡

 

相似於這樣的效果

<div id="box">

    <ul>

        <li class="active">褲子</li>

        <li>襪子</li>

        <li>裙子</li>

        <li>帽子</li>

    </ul>

    <div class="show">品牌牛仔褲</div>

    <div>男士白色襪子</div>

    <div>時尚連衣裙</div>

    <div>炫酷棒球帽</div>

</div>

最外側的是大盒子 而後盒子內部有一個ul li float:left

下側全部的div設置爲display:none

而後爲第一個li和第一個div設置引用一個active 和一個 show

會出現如圖所示的效果 點擊上下對應切換的效果

首先獲取到全部的div和li

當點擊li的時候首先暴力清除全部li和div的樣式 而後給當前的div和li 設置引用active 和show

可是這裏出現的問題是

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

aLi[i].onclick=function(){

// 首先清除全部的li和div樣式

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

aLi[i].className="";

aDiv[i].className="";

}

this.className="active";

}

}

函數內部的for循環內的i在函數內部是用不到的 在函數內部i一直是aLi.length

因此不能直接用i

能夠用到this但this只是指向了本身 能夠實現當前按鈕的樣式的切換 可是下面的div仍是樣式獲取不到

這裏能夠用到自定義屬性 即加一個索引

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

aLi[i].index=i;

aLi[i].onclick=function(){

// 首先清除全部的li和div樣式

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

aLi[i].className="";

aDiv[i].className="";

}

this.className=」show」;

aDiv[this.index].className=」active」;

}

}

和其相似的是 setAttribute(「index」,i); 可是設置以後還須要獲取才能用

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

aLi[i].setAttribute(「index」,i);

aLi[i].onclick=function(){

// 首先清除全部的li和div樣式

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

aLi[i].className="";

aDiv[i].className="";

}

var aa = this.getAttribute("index");  //-------!!!!---------//

aDiv[aa].setAttribute("class","show");

this.setAttribute("class","active");}

aDiv(this.index).className=」show」;

}

沒有加感嘆號的這句的話,就不能引用這個自定義屬性 必須先獲取到 才能使用 而點語法就能夠直接使用