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}