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