js实现tab切换效果实例

<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>

/** * 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");}

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}