特别实用灵活多选项卡示例(原生javascript)

星期日 2015年8月2日 风羽 前端 javascript  DIV CSS   0人
特别实用灵活多选项卡示例(原生javascript)

实用灵活多选项卡示例,一段简洁的原生javascript,只需要对应DIV的id即可灵活多用,同一个页面无需要写重复加js,非常的实用!如果项目里只需要选项卡效果,不管多少个这小段代码就搞定!不用加载jquery等冗余插件才是最优的方案。

先来看JS代码:

function nTabs(thisObj,Num){    
	if(thisObj.className == "active")return;    
		var tabObj = thisObj.parentNode.id;    
		var tabList = document.getElementById(tabObj).getElementsByTagName("li");    
		for(i=0; i <tabList.length; i++)    
		{    
			if (i == Num)    
			{    
			thisObj.className = "active";    
			document.getElementById(tabObj+"_Content"+i).style.display = "block";    
			}else{    
		tabList[i].className = "normal";    
		document.getElementById(tabObj+"_Content"+i).style.display = "none";    
		}    
	}    
}