javascript实现tab切换效果

这个功能是很久之前实现的，现在发上来，很长一段时间没更新博客了，真惭愧。这个JS代码还有很多修改的空间，先发上来，以后再发个更新的版本吧。

这是效果图：

【HTML代码】

<div id="menu">
<!--tag标题-->
	<ul id="nav">
		<li><a href="#"  class="selected">tab1</a></li>
		<li><a href="#"  class="">tab2</a></li>
        <li><a href="#"  class="">tab3</a></li>
        <div style="clear:both"></div>
    </ul>
<!--二级菜单-->
	<div id="menu_con">
		<div class="tag" style="display:block">
  			这是TAB切换效果区域1
		 </div> 
		<div class="tag" style="display:none">
			这是TAB切换效果区域2	
         </div> 
		<div class="tag"  style="display:none">
 	    	这是TAB切换效果区域3
		</div> 
</div>
</div>

【js】

/**
 * tabs
 * @author   橡树小屋
 */
var tabs=function(){
	function tag(name,elem){
		return (elem||document).getElementsByTagName(name);
	}
	//获得相应ID的元素
	function id(name){
		return document.getElementById(name);
	}
	function first(elem){
		elem=elem.firstChild;
		return elem&&elem.nodeType==1? elem:next(elem);
	}
	function next(elem){
		do{
			elem=elem.nextSibling;	
		}while(
			elem&&elem.nodeType!=1	
		)
		return elem;
	}
	return {
		set:function(elemId,tabId){
			var elem=tag("li",id(elemId));
			var tabs=tag("div",id(tabId));
			var listNum=elem.length;
			var tabNum=tabs.length;
			for(var i=0;i<listNum;i++){
					elem[i].onclick=(function(i){
						return function(){
							for(var j=0;j<tabNum;j++){
								if(i==j){
									tabs[j].style.display="block";
									//alert(elem[j].firstChild);
									elem[j].firstChild.className="selected";
								}
								else{
									tabs[j].style.display="none";
									elem[j].firstChild.className="";
								}
							}
						}
					})(i)
			}
		}
	}
}();
window.onload=function(){
	tabs.set("nav","menu_con");
}

【CSS】

body{ background:#FFF;}
a{color:#585858}
#menu{360px;}
/*-------------------nav样式----------------------*/
#menu #nav {display:block;100%;padding:0;margin:0;list-style:none;
 background:url(../images/bg.gif)}
#menu #nav li {float:left;120px;}
#menu #nav li a {display:block;line-height:27px;text-decoration:none;padding:0 0 0 5px; text-align:center}

/*-------------------列表标题样式----------------------*/
#menu_con{ 358px; height:135px;border:1px solid #BF9660; border-top:none}
.selected{background:url(../images/tag_bg.gif);}
.clear{ clear:both}

调用方法：

tabs.set("nav","menu_con");

代码下载 点击这里

只实现了点击切换的效果。