JS自定义选项卡函数及用法实例分析

本文实例讲述了射流研究…自定义选项卡函数及用法。分享给大家供大家参考。具体如下：

这里分享一个射流研究…选项卡函数附带演示效果，选项卡函数参数调用说明：

cmd:点击元素集合con:显示容器集合evt:触发事件css:为当前点击元素的样式名称索引：为默认显示第几项的索引值目前选项卡的样式还比较简洁和粗糙，想用的自己动动手美化一下。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-zdy-tab-cha-fun-style-codes/

具体代码如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8' /titleJs选项卡/titlestyle type='text/css'ul，li { margin:0划水：0;飞越：隐藏；列表式：无；font-family:'Lucida控制台'，摩纳哥，monospace } # tab { width :300 px；高度：25pxborder:1px实心# ddd } # tab li {宽度：75像素宽度：25像素线高：26 px文本对齐：居中；float : leftcursor : pointer } # tab Li。curr { background : # eee } # con { width :300 px；border:1px实心# DDD margin-top :-1px；} # con li { display:none宽度宽度：280像素高度：100 pxpadd :10 px }/style/head dydiv id=' tab ' ul li1/Li Li 2/Li Li/Li Li 4/Li/ul/div id=' con ' ul lia/Li lib/Li Li/Li lid/Li/ul/div脚本类型=' text/JavaScript '/*选项卡函数：cmd:点击元素集合con:显示容器集合evt:触发事件css:为当前点击元素的样式名称索引：为默认显示第几项的索引值email :[email][email protected][/email]*/(function(t){ window[t]=function(cmd，con，evt，css，index){ //默认触发事件var evt=evt || 'mouseover '，//默认样式名css=css || 'curr '，index=index | | 0；//初始化显示项显示（索引);//为点击元素绑定事件for(var i=0，l=cmd.lengthI li ){ //为准确获得我的值用闭包传值（函数(n){ cmd[n]['on' evt]=函数(){ //切换到索引为我的选项show(n)；} })(一)；};//切换显示函数show(i){ cmd[index].CLaSS name=cmd[index]。CLaSS名称。替换(CSS，")；con[索引]。风格。显示='无'；索引=我；cmd[索引]。className=csscon[index]。风格。display=' block} }//指定选项卡函数的名称})("制表符");函数标记(I，t){ 0返回document.getElementById(i).getElementsByTagName(t)；};//调用选项卡函数Tab(tag('tab '，' li ')，tag('con '，' li ')，' click '，''，1)；/脚本/正文/html希望本文所述对大家的爪哇岛描述语言程序设计有所帮助。