javascript原生小练习（一）--tab切换、getClassName、addClass、removeClass

<script type="text/javascript">
function getClassName(classname)
{
	var classobj = new Array(),tag = document.getElementsByTagName("*");
	for (var i in tag)
	{
		if(tag[i].nodeType == 1 && tag[i].className == classname){classobj.push(tag[i]);}
	}
	return classobj;
}


function setClass(obj,classname)
{
	var reg =new RegExp("(\\s|^)" + classname + "(\\s|$)");//前面有空格或者以classname为开头，后面有空格或者以classname为结尾
	return {
		hasClass : obj.className.match(reg),
	    addClass : function(){
			if(!this.hasClass)
			{
				obj.className += " "+classname; 
			}
		},
	    removeClass : function(){
			if(this.hasClass)
			{
				
				obj.className = obj.className.replace(reg,"");
			}
		}
	}
}


function tabFun(classname)
{
	var classobj = getClassName(classname);
	for(var i in classobj)
	{
		var tabTit = classobj[i].getElementsByTagName("div")[0].getElementsByTagName("a"),
			tabCon = classobj[i].getElementsByTagName("div")[1].getElementsByTagName("div"),
			timer = null;
		for(var j = 0;j < tabTit.length;j++)
		{
			tabTit[j].index = j;
			tabTit[j].οnmοuseοver=function(){
				show(this.index);
			} 
		}
		function show(index){
			for(var j = 0;j < tabTit.length;j++)
			{
				if(j == index)
				{
					setClass(tabTit[index],"current").addClass();
					tabCon[index].style.display = "block";
				}
				else
				{
				  	setClass(tabTit[j],"current").removeClass();
				  	tabCon[j].style.display = "none";
				}
				
			}
			
		}
	}
	
}


window.onload = function(){
	tabFun("js-tab");
}
	


</script>

<div class="js-tab">
	<div class="tab-tit">
    	<a class="item current">1</a>
        <a class="item">2</a>
        <a class="item">3</a>
    </div>
    <div class="tab-pn">
    	<div class="item">1</div>
        <div class="item" style="display:none;">2</div>
        <div class="item" style="display:none;">3</div>
    </div>
</div>