js实现tab切换效果实例

直接先来个真相吧：

【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"）;
代码下载点击这里
这个实例只是简单实现了点击切换的效果，还有许多功能可以添加，大家一起动手实践一下吧。