js实现tab切换效果

*{margin:0; padding:0;}

body { font:12px/1.8 Arial; color:#666;}

.wrapper { width:500px; border:1px solid #e6e6e6; margin:0 auto; padding:50px;}

/*--=tabPanel--*/

#tab{border:1px solid #ccc;}

#tab .tab-bd{border-top:none;margin:0 auto;padding:10px;text-align:left;height:120px;position:relative}

.tab-nav{margin:0 auto;padding:0;background:#eee;height:26px;}

.tab-nav li{display:inline;list-style:none outside none;width:90px;height:26px;float:left;line-height:26px;text-align:center;}

.tab-nav li a{color:#555;display:inline-block}

.tab-nav li a:hover,.tab-nav li.hover a{text-decoration:none;background:#fff;color:#000;display:block; }

.hidden{display:none}

function tabPanel(param){

 var defaultIndex=param["default"]||0,//设置显示的页面

 panelobj=param["panel"],//设置tab容器

 defalutClass=param["defalutStyle"]||"",//设置tab菜单项的普通样式

 hoverClass=param["hoverStyle"]||"hover",//设置鼠标移到tab菜单项的样式

 currentIndex=defaultIndex,

 menus=_$(panelobj).getElementsByTagName("ul")[0].getElementsByTagName("li"),

 contents=_$(panelobj).getElementsByTagName("ul")[1].getElementsByTagName("li"),

 menuNumber=menus.length,

 hidden="hidden";

 for(var i=0;i

 _setClass(contents[0],hoverClass);

 _setClass(contents[i],hidden);

 _setClass(menus[i],defalutClass);

 (function(i){

  menus[i].onmouseover=function(){

  varold=menus[currentIndex];

  _setClass(old,defalutClass);

  _setClass(contents[currentIndex],hidden);

  varcur=menus[i];

  _setClass(cur,hoverClass);

  currentIndex=i;

  _setClass(contents[i],"");

  };

 })(i);

 }

 _setClass(menus[currentIndex],hoverClass);

 _setClass(contents[currentIndex],"");

 //便利函数

 function _setClass(obj,className){obj.className=className}

 function _$(oid){return typeof(oid) == "string"?document.getElementById(oid):oid}

}

tabPanel({"panel":"tab"});//panel为必填项，default、defalutStyle、hoverStyle为选填项