您好,欢迎访问一九零五行业门户网

JavaScript 封装一个tab效果源码分享_javascript技巧

效果图如下:
查看演示  源码下载
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}
其它类似信息

推荐信息