效果如下：

代码如下：

！DOCTYPE html html head meta charset=' utf-8 '/title js封装一个标签效果/title style type=' text/CSS ' * { margin :0；划水：0;}车身{ font :12 px/1.8 Arial；color: # 666}。包装材料{ width:500pxborder:1px实心# e6e6margin :0 autopadding :50 px }/*-=Tabpanel-*/# Tab { border :1 px solid # CCC；} #选项卡tab-BD {边框-顶部：无；边距：0自动添加： left向左对齐：高度：120 px位置：relative} .tab-nav { margin :0 auto；划水：0;背景技术# eee高度：26 px}.tab-nav Li {显示：行内；列表样式：none外部无；宽度：90 px高度：26 pxfloat:left线高：26 px文本对齐：居中；}.选项卡导航阿利{ color : # 555 display : inline-block } .选项卡-导航阿利：悬停tab-Li导航。悬停a { text-decoration : none背景# fffcolor: # 000显示：块；}.隐藏{display:none}/style脚本类型=' text/JavaScript '函数Tabpanel(param){ var DefaultIndex=param[' default ']| | 0，//设置显示的页面panelobj=param['panel']，//设置标签容器default class=param[' default style ']| | '，//设置标签菜单项的普通样式悬停类=param['悬停样式']|| '悬停',//设置鼠标移到标签菜单项的样式currentIndex=defaultIndex，menu=_ $(panel obj).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]，HeaLTH Class)；_setClass(目录[i]，隐藏);_setClass(菜单[i]，DefalutClass)；（功能(菜单[i].onmouseover=function(){ var old=menu[CurrentDex]；_setClass(旧，DefalutClass)；_setClass(内容[CurrentDex]，隐藏);var cur=菜单[一]；_setClass(cur，HeaLTH Class)；当前指数=I；_setClass(目录[i]，' ')；};})(一)；} _setClass(菜单[CurrentDex]，HeaLTH Class)；_setClass(目录[CurrentDex]，' ')；//便利函数function _setClass(obj，类名){ obj。类名=类名} function _ $(oid){返回类型(oid)==' string '？文件。getelementbyid(oid): oid } }/脚本正文div class=' wrapper ' div id=' tab '！-tabbhead-ul class=' tab-nav ' lia href=' JavaScript 3: void(0)' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow '交易安全/a/Li lia href=' JavaScript : void(0)' rel='外部不跟随' rel='外部不跟随' rel='外部不跟随'淘宝大学/a/Li lia href=' JavaScript : void(0)' rel='外部不跟随' rel='外部不跟随' rel='外部不跟随'爱心/a/li /ul！-Tabpanel-ul class=' tab-BD ' Li 1111/Li Li 222/Li Li 333/Li/ul/div脚本类型=' text/JavaScript ' Tabpanel({ ' panel ' : ' tab ' })；//面板为必填项、默认、默认样式、悬停样式为选填项/script/div/body /html以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！