javascript实现tab切换效果

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

这是效果图：

【HTML代码】

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53

/**   * 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】

1 2 3 4 5 6 7 8 9 10 11 12 13

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

代码下载 点击这里

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