qq_魑魅_3
2017-05-11 18:45
for(var i = 0; i < aLi.length; i++) {
aLi[i].index = i;
aLi[i].onmouseover = function() {
for(var i = 0; i < aLi.length; i++) {
aLi[i].className = "";
}
this.className = "active";
for(var j = 0; j < aDiv.length; j++) {
aDiv[j].className = "hide";
}
aDiv[this.index].className = "show";
}
}
}
for(var i = 0; i < aLi.length; i++) {
//进入for循环
aLi[i].index = i;
//在这里储存一个索引值(索引值代表着li的下标,具体的可以多看看for循环的有关内容)
aLi[i].onmouseover = function() {
//给每一个li添加一个鼠标移入事件
for(var i = 0; i < aLi.length; i++) {
aLi[i].className = "";
}
//这个for循环的作用是清除掉 所有 li的classname
// (为什么清除classname呢?
//因为这里结合后面可以知道是通过给className来控制div的现实与否,比直接控制style样式方便)
this.className = "active";
//这里的this指向的是我们触发的li,就是说鼠标移到哪个li上时this就指向哪个li,这时li的样式会改变
for(var j = 0; j < aDiv.length; j++) {
aDiv[j].className = "hide";
}
//这里让所有的div都隐藏掉
aDiv[this.index].className = "show";
//aLi[i].index = i; 因为无法直接用i,所以通过这种方法来变相的获取i的值。
//通过this.index来获取到一个下标,从而控制相对应的div进行显示
}
}
}JavaScript进阶篇
469060 学习 · 22582 问题
相似问题