关于编程挑战有些问题想请教一下各位大神。
朱戏以
2016-07-20 07:53
window.onload = function() {
var oUl1 = document.getElementById("ul1");
var aLi = oUl1.getElementsByTagName("li");
var oDiv = document.getElementById("tab-list");
var aDiv = oDiv.getElementsByTagName("div");
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";
}
}
}
循环那一段不明白他是什么意思，它是怎样达到鼠标移动切换三个页面的
3回答
-
- 用户1136614
- 2016-07-20 12:26:50
for(var i = 0; i < aLi.length; i++) { //第一到第三个页面 aLi[i].index = i; // 取下每个页面的页面数 aLi[i].onmouseover = function() { // 当前li标签被点击时 for(var i = 0; i < aLi.length; i++) { //将所有的className设置为空字符串 aLi[i].className = ""; } this.className = "active"; // 单独当前页面的className设置为active for(var j = 0; j < aDiv.length; j++) { aDiv[j].className = "hide"; // 所有的页面className设置为 hide } aDiv[this.index].className = "show"; // 单独将当前页面设置为show } } // 其实 aLi[i].onmouseover = function()被调用的时候 for循环将3个li标签的className设置为空 再单独将当前页面取出来设置它的this.className = "active"，这样你点击了那个li标签就有区别 因为 active标签的css样式是不一样的 再 for(var j = 0; j < aDiv.length; j++) 这个for循环 也是将3个div标签className设置为空 循环出来 aDiv[this.index].className = "show";//单独将当前页面设置为show 这样对应的页面就显示 出来了，hide设置为隐藏 因为show不等于hide 是没有样式的 默认是显示的。 以上是我的个人理解。 -
- yemaa
- 2016-07-20 11:56:44
通过循环吧li的class属性值设为"" ，当前的class设为"active";来实现的
-
- 赫昂山
- 2016-07-20 11:47:30
通过循环里面对aLi的classname的修改达到css样式改变的效果 ，在循环中onmouseover事件里面同理。
JavaScript进阶篇
468194 学习 · 21891 问题
相似问题