JS将滑动门改为选项卡（需鼠标点击)的实现方法

本文实例讲述了射流研究…将滑动门改为选项卡（需鼠标点击)的实现方法。分享给大家供大家参考。具体如下：

大家都知道，滑动门和选项卡在布局和结构方面几乎是一样的，唯一不同的是触发方式，这个是由Java脚本语言决定的，大致来讲就是将onmouseover改为onclick就行了，本款选项卡以前是款比较流行的滑动门，现在改成了选项卡，大家看看有什么区别。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-hdm-2-nav-tab-style-demo/

具体代码如下：

！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 '标题滑动门改为选项卡/title style * { padd :0；margin :0 font-size :12 px；} # main { margin :20 px } ul { width :600 px } # tab Li { list-style : none；float:left文本对齐：居中；划水：0;} #选项卡a { display:block文本装饰：无；宽度：94 px线高：24 px} # cont { clear : both border :1 px纯蓝；边框-top :0；宽度：562px！重要；宽度宽度：564px高度：190 px溢出-y :隐藏；}.普通{ margin:5px}。普通李{列表式：无；填充-左侧：14px！重要；左填充：0;填充-top :4 px；}.普通阿利}.普通阿利：悬停{颜色：红色；}.在{背景：网址(图像/标签S3。gif)上，不重复左下方；}.关闭{背景：网址(图像/标签S2。gif)无重复左下方；}/style脚本函数$(ID){返回文档。getelementbyid(ID)}函数显示标签(ID){ for(var I=1；i7；I){ if(ID==I){ $(' tab ' I)} .blur()；$("标签“.类名=' on $(“cont”I)。风格。display=" block} else { $(“tab”I).关闭$(“cont”I)。风格。display=" none} }返回false }/script/head dydiv id=' main ' div id=' tab ' ullia href=' JavaScript : void(0)' id=' tab 1 ' class=' on ' onclick=' show tab '(1)' C #源代码/a/lilia href=' JavaScript : void(0)' id=' tab 2 ' class=' off ' onclick=' show tab(' 2 ')' VB源代码/a/lilia href=' JavaScript : void(0)' id=' tab 3 ' class=' off onclick=' show tab(' 3 ')VC源代码/a/lilia href=' JavaScript : void(0)' id=' tab 4 ' class=' off ' onclick=' show tab(' 4 ')' JQUERY脚本/a/lilia href=' JavaScript : void(0)' id=' tab 5 ' class=' off ' onclick=' show tab(' 5 ')' Delphi代码/a/lilia href=' JavaScript : void(0)' id=' tab 6 ' class=' off ' onclick=' show tab(' 6 )JAVA源代码/a/Li/ul/div div id=' cont ' div id=' cont 1 ' class=' common ' style=' display : block； lia href='#' target='_blank'30多个C#基础学习实例/a/Li/div div style=' display : none；id=' cont 2 ' class=' common ' lia href=' # ' target=' _ blank ' VB仿用计算机修改（图片或照片)曲线调整图像亮度源程序/a/Li/div div style=' display : none；id=' cont 3 ' class=' common ' lia href=' # ' target=' _ blank ' VC仿RealonePlayer播放器的窗体界面/a/Li/div div style=' display : none；id=' cont 4 ' class=' common ' lia href=' # ' target=' _ blank ' Farbtastic jQuery圆形网页取色插件/a/Li/div div style=' display : none；id=' cont 5 ' class=' common ' lia href=' # ' target=' _ blank ' Delphi基础学习实例代码/a/Li/div div style=' display : none；id=' cont 6 ' class=' common ' lia href=' # ' target=' _ blank ' Java图书管理程序代码/a/Li/div/div/body/html希望本文所述对大家的Java脚本语言程序设计有所帮助。