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”;

}

没有加感叹号的这句的话,就不能引用这个自定义属性 必须先获取到 才能使用 而点语法就能够直接使用