JS实现完全语义化的网页选项卡效果代码

本文实例讲述了射流研究…实现完全语义化的网页选项卡效果代码。分享给大家供大家参考。具体如下：

这是一款完全语义化的射流研究…网页选项卡，包括了两种用法，一种是点击式，另一种是滑动门式，具体用哪一种要根据你自己的需要了，滑动门是在鼠标经过时触发，选项卡则是需要鼠标点击的。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-yyh-web-tab-cha-nav-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 '标题语义化的网页选项卡/title style type=' text/CSS ' * { margin :0；划水：0;font-size :13 px线高：1.5;}车身{ padding:20px }。cur { color : # f60 border-bottom :1 px实心# fffont-weight : bold；背景# fffcursor:default} #tab_，dl { position : relative float : left高度：100 px宽度宽度：300px} h4，dt { float:left高度：20 pxmargin :0 0 0 8pxdisplay : inline线高：20 px宽度：60 pxborder:1px固体# ccc位置：相对；z索引：11;文本对齐：居中；字体粗细：正常；光标：指针指针；背景技术# eee}。c，DD { position : absolutetop :21 pxborder :1 px固体# cccleft:0宽度宽度：250pxpadding:20px飞越：隐藏；显示：块；} # tab _ { clear : left } h1 { clear : leftadd :10 px 0 } # tab _ 1。cur { color : # f60 } # tab _ 2。cur { color : blue } # tab _ 3。cur { color : green }/style/headdy h1 mouse over/h1dl id=' tab ' dt美国dt/DD我都不怕/dd dt朝鲜dt/DD谁都怕我/dd dt某国dt/DD我谁都怕/DD/dlh1click/h1 div id=' tab _ ' H4橙/H4 div class=' c '桔红/div h4blue/h4 div class='c '蓝色/div h4green/h4 div class='c '绿色/div/div脚本类型=' text/JavaScript '函数id(elem){返回文档。getelementbyid(elem)}函数show(elem){ elem。风格。display=}函数隐藏。风格。显示='无'；}函数next(elem){ do { elem=elem。下一个兄弟姐妹；} while (elem elem.nodeType！=1 );返回elem}函数选项卡(a，p) { var p=(p===未定义)?{e:'onclick '，n:1} : p，node=id(a).firstChild，x=[]；p.e=(p.e===未定义)?onclick ' : p.ep.n=(p.n===未定义)?1 : p.nnode=(node.nodeType！==1)?下一个(节点):node对于(var i=1，节点；节点；I，node=next(node)){ x[I]=node；} for(var I=1；x[I]；I){ if(I % 2==0){ hide(x[I])；x[i-1].id=a (i/2)} x[p.n*2-1]。类名=' curs how(x[p . n * 2])；温度=函数(i) { if (i % 2==1) { x[i][p.e]=函数(){ for(var j=1；x[j]；j){ if(j % 2==0){ hide(x[j])；x[j-1].类名=' ' } } show(x[I ^ 1])；x[i].类名=' cur ' } } else { return null } }(I)} } tab(' tab '，{e:'onmouseover '，n :2 })；制表符(“tab _”)/脚本/正文/html希望本文所述对大家的Java脚本语言程序设计有所帮助。