JavaScript封装一个标签效果源码分享

效果图如下：

查看演示源码下载

超文本标记语言代码

！DOCTYPE htmlhtmlheadtitletab测试/title meta http-equiv=' Content-Type ' Content=' text/html；charset=UTF-'/link。CSS ' rel='样式表type=' text/CSS '/script type=' text/JavaScript ' src=' http : js/tab-min。js '/script/head dydiv id=' tab '！-TabHead-ul class=' tab-nav ' lia href=' JavaScript : void()'交易安全/a/Li lia href=' JavaScript : void()'淘宝大学/a/Li lia href=' JavaScript : void()'爱心/a/li /ul！-Tabpanel-ul class=' tab-BD ' Li/Li Li/Li Li/ul/div脚本类型=' text/JavaScript ' Tabpanel({ ' panel ' : ' tab ' })；//面板为必填项、默认、默认样式、悬停样式为选填项/脚本/正文/htmljs代码

函数选项卡面板(参数){ var defaultIndex=param[' default ']| |，//设置显示的页面panelobj=param['panel']，//设置标签容器default class=param[' default style ']| | '，//设置标签菜单项的普通样式悬停类=param['悬停样式']|| '悬停',//设置鼠标移到标签菜单项的样式currentIndex=defaultIndex，menu=_ $(panel obj).getElementsByTagName('ul')[].getElementsByTagName('li ')，contents=_$(panelobj).getElementsByTagName('ul')[].getElementsByTagName('li ')，menuNumber=menus.length，hidden=' hidden '对于(var I=；维度编号；i ){ _setClass(contents[]，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 } } CSS代码

# tab { border:px实心# ccc} #选项卡tab-BD {边框-顶部：无；边距：自动添加： pxtext-向左对齐：高度：像素位置：relative} .tab-nav { margin : auto；划水：背景技术# eeeheight:px }。tab-nav Li {显示：行内；列表样式：none外部无；宽度： px高度：pxfloat:left线高： px文本对齐：居中；}.选项卡-导航阿利{ color : #；display:inline-block} .选项卡-导航阿利：悬停tab-Li导航。悬停a { text-decoration : none背景# fffcolor : #显示：块；}.隐藏{display:none}