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{width:360px;}

/*-------------------nav样式----------------------*/

#menu #nav {display:block;width:100%;padding:0;margin:0;list-style:none;

 background:url(../images/bg.gif)}

#menu #nav li {float:left;width:120px;}

#menu #nav li a {display:block;line-height:27px;text-decoration:none;padding:0 0 0 5px; text-align:center}



/*-------------------列表标题样式----------------------*/

#menu_con{ width: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");

代码下载 点击这里

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