效果图如下：
查看演示 源码下载
html代码
tab测试
- 交易安全
- 淘宝大学
- 爱心
js代码
function tabPanel(param){
var defaultIndex=param["default"]||,//设置显示的页面
panelobj=param["panel"],//设置tab容器
defalutClass=param["defalutStyle"]||"",//设置tab菜单项的普通样式
hoverClass=param["hoverStyle"]||"hover",//设置鼠标移到tab菜单项的样式
currentIndex=defaultIndex,
menus=_$(panelobj).getElementsByTagName("ul")[].getElementsByTagName("li"),
contents=_$(panelobj).getElementsByTagName("ul")[].getElementsByTagName("li"),
menuNumber=menus.length,
hidden="hidden";
for(var i=;i
css代码
#tab{border:px solid #ccc;}
#tab .tab-bd{border-top:none;margin: auto;padding:px;text-align:left;height:px;position:relative}
.tab-nav{margin: auto;padding:;background:#eee;height:px;}
.tab-nav li{display:inline;list-style:none outside none;width:px;height:px;float:left;line-height:px;text-align:center;}
.tab-nav li a{color:#;display:inline-block}
.tab-nav li a:hover,.tab-nav li.hover a{text-decoration:none;background:#fff;color:#;display:block; }
.hidden{display:none} 
