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";
}
}
}
循环那一段不明白他是什么意思，它是怎样达到鼠标移动切换三个页面的
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 是没有样式的 默认是显示的。 以上是我的个人理解。通过循环吧li的class属性值设为"" ，当前的class设为"active";来实现的
通过循环里面对aLi的classname的修改达到css样式改变的效果 ，在循环中onmouseover事件里面同理。