JS实现横向与竖向两个选项卡标签联动的方法

本文实例讲述了射流研究…实现横向与竖向两个选项卡标签联动的方法。分享给大家供大家参考。具体如下：

这是一款横向、竖向联动的选项卡，其卡片内容是一样的，只不过多了一个操作途径，当点击一个选项卡的时候，另一个选项卡同样会指示出当的选项卡位置，也就是两者的功能是相同的，很巧妙的布局方法。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-hx-sx-tab-ld-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 ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8' /title选项卡标签联动/title style type=' text/CSS ' body { text-align : center；余量：0划水：0;font-size :12 px}div、form、img、ul、ol、li、dl、dt、dd { margin:0划水：0;border:0}h1、h2、h3、h4、h5、h6、p、table、td { margin:0划水：0;font-size :12 px}李{列表式：无；} #布局{ width :500 pxmargin :10 px汽车；} # tab nav { width :80 pxfloat : left } # tab nav Li { float : left宽度：70 px高度：23px线高：23 px光标：指针指针；border:1px固体# cccmargin :2 px 0 0 0 display : inlinecolor : # 333 } #选项卡导航Li。当前{ color : # f60字体粗细：加粗；} #制表符{宽度：400像素宽度：235像素右浮动：} # tab ul { width :400 pxheart :24 px } # tab Li { float : left宽度：70 px高度：23px线高：23 px光标：指针指针；border:1px固体# cccmargin :0 1 px 0 0 display : inline背景技术： # 333;color: # fff} # tab Li。当前{背景： # f60字体粗细：加粗；} #选项卡tabcon { float:left宽度宽度：398像素宽度：208像素显示：像素边界：1像素固体# ccc} #选项卡block { display : block }/style/head dydiv id=' layout ' ul id=' tab nav ' Li onclick=' go _ to(1)；class='current '最新精华帖/Li Li onclick=' go _ to(2)；'最新帖子/Li Li onclick=' go _ to(3)；'最旧帖子/Li Li onclick=' go _ to(4)；'新最帖子/Li Li onclick=' go _ to(5)；'旧最帖子/Li/ul div id=' tab ' ul id=' tab nav 02 ' Li onclick=' go _ to(1)；class='current '最新精华帖/Li Li onclick=' go _ to(2)；'最新帖子/Li Li onclick=' go _ to(3)；'最旧帖子/Li Li onclick=' go _ to(4)；'新最帖子/Li Li onclick=' go _ to(5)；'旧最帖子/Li/ul div id=' tabcon _ 1 ' class=' tabcon block ' 1/div id=' tabcon _ 2 ' class=' tabcon ' 2/div id=' tabcon _ 3 ' class=' tabcon ' 3/div id=' tabcon _ 4 ' class=' tabcon ' 4/div id=' tabcon _ 5 ' class=' tabcon ' 5/div脚本类型='text/javascript '！-var h=文档。getelementbyid('选项卡导航').getElementsByTagName(' Li ')；var d=文档。getelementbyid('选项卡导航02 ').getElementsByTagName(' Li ')；函数go _ to(s){ for(var I=1；i=h。长度；i ){ if(s==i){ h[i-1].currentd[i-1].当前文档。getelementbyid(' tabcon _ I ').tabcon block} else{ h[i-1].类名=d[i-1].className=文档。getelementbyid(' tabcon _ I ').{ }//////script/div/div/body/html希望本文所述对大家的Java脚本语言程序设计有所帮助。