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";
}
}
}
不知道你现在弄懂没有,刚刚看了别人的解释,用自己的话总结一下:
第一个循环是为了绑定下标i,为了让后面本页面class能被设置为“show”而进行的。
在第一个循环内有鼠标监听事件定义了点击后的函数,其中包含了另一个循环,将所有页面的classname都设置成“hide”,在css中.hide的样式是不显示,然后再单独将被点击的页面设置为“show”
同求....
选项卡 可以参考慕课的这段http://www.imooc.com/code/1912