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

}

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