表格点击切换

  1. 把所有需要切换的表格样式设置完成后,再通过定位把所有的表格合并再一起,随后把不显示的表格隐藏。
  2. 设置一个高亮类,通过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";
		};
	}
};

表格点击切换