javascript选项卡切换完整7部曲（javascript高级功能）

1.获取所有的选项卡标签

var olis = document.getElementsByTagName("li");

2.循环遍历所有选项卡标签

for(var i=0;i<olis.length;i++){

3.给每个Tab选项卡创造一个索引下标

olis[i].index = i;

4.动态绑定事件

olis[i].onmouseover = function(){

5.再次循环遍历 或者 找到要操作的层或列表

for(var j=0;j<olis.length;j++){

6.清除和隐藏所有元素的className和DIV/DL层

olis[j].className = "";

document.getElementById("xxx-"+j).style.display = "none";

}

7.显示选项卡对应的DIV以及追加指定样式(给className赋值)

olis[this.index].className = "自定义的类选择器名";

document.getElementById("xxx-"+this.index).style.display = "block";

}

}

代码案例：

window.onload=function(){

//1.获取一级菜单，二级菜单

var oli=document.getElementsByTagName("li");

var odl=document.getElementsByTagName("dl");

//2.循环遍历一级菜单

for(var i=0;i<oli.length;i++){

//3.给每个一级菜单鼠标移动动态事件

oli[i].onmouseover=function(){

//4.遍历二级菜单，隐藏所有二级菜单

for(var j=0;j<odl.length;j++){

odl[j].style.display="none";

}

//5.当鼠标移动时，显示当前二级菜单

var dl=this.getElementsByTagName("dl");

if(dl.length>0){

dl[0].style.display="block";

}

}

//给每个一级菜单绑定鼠标移除事件

oli[i].onmouseout=function(){

for(var j=0;j<odl.length;j++){

odl[j].style.display="none";

}

}

}

}