我给大家分享一下tab选项卡的做法,tab选项卡可以使页面更加美观,不占用页面,代码来自于潘老师的上课案例,我们可以看一下下面的截图
if (liList.length !==divList.length){
return;
}
for (var m=0;m<liList.length;m++){
liList[m].id=m;
liList[m].onclick=function(){
for(var n=0;n<liList.length;n++){
if(liList[n].className=="active"){
liList[n].className="";
divList[n].style.display="none";
break;
}
}
this.className="active";
divList[this.id].style.display="block";
};
}
先获取到它们的id,给它一个判断,如果长度不等,就返回。再来一个for循环,里面加一个判断,如果类名等于active,就让它为空,那么内容区的样式就隐藏,然后跳出。在for循环外面点击时当前的类名为active,内容区当前的id的样式显示。这样一个简单的tab选项卡就做好了,如果有什么错误的地方,欢迎指正~