- 把所有需要切换的表格样式设置完成后,再通过定位把所有的表格合并再一起,随后把不显示的表格隐藏。
- 设置一个高亮类,通过js控制给点击的表格添加高亮类,同时把原本的表格去除高亮类,
这里省去了HTML的布局直接展示js部分:
window.function(){
var libox = document.getElementById("tab_tit").getElementsByTagName("li");//顶部切换按钮 元素
var divmo= document.getElementsByClassName("mod"); // mod 底下需要变换的类
//判断按钮与内容长度是否一致
if(libox.length!==divmo.length){
return;//返回
}
for(var i=0;i<libox.length;i++){
libox[i].id = i;
libox[i].onclick=function(){
//for去掉当前按钮高亮的样式以及隐藏内容区
for(var j=0;j<libox.length;j++){
if(libox[j].className==="active"){ //HTML设置的高亮类active
libox[j].className="";
divmo[j].style.display="none";
}
}
this.className = "active"; //高亮类active
divmo[this.id].style.display="block";
};
}
};
