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");

代碼下載 點擊這裡

只實現了點擊切換的效果。