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

摘要：本文实例讲述了JS实现横向与竖向两个选项卡Tab联动的方法。分享给大家供大家参考。具体如下：这是一款横向、竖向联动的选项卡，其卡片内容是一样...

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

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

运行效果截图如下：

在线演示地址如下：

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/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>选项卡Tab联动</title> <style type="text/css"> body{text-align:center;margin:0;padding:0;font-size:12px;} div,form,img,ul,ol,li,dl,dt,dd{margin:0;padding:0;border:0;} h1,h2,h3,h4,h5,h6,p,table,td{margin:0;padding:0;font-size:12px;} li{list-style:none;} #layout{width:500px;margin:10px auto;} #tabnav{width:80px;float:left;} #tabnav li{float:left;width:70px;height:23px;line-height:23px;cursor:pointer;border:1px solid #ccc;margin:2px 0 0 0;display:inline;color:#333;} #tabnav li.current{color:#f60;font-weight:bold;} #tab{width:400px;height:235px;float:right;} #tab ul{width:400px;height:24px;} #tab li{float:left;width:70px;height:23px;line-height:23px;cursor:pointer;border:1px solid #ccc;margin:0 1px 0 0;display:inline;background:#333;color:#fff;} #tab li.current{background:#f60;font-weight:bold;} #tab .tabcon{float:left;width:398px;height:208px;display:none;border:1px solid #ccc;} #tab .block{display:block;} </style> </head> <body> <div id="layout"> <ul id="tabnav"> <li>最新精华帖</li> <li>最新帖子</li> <li>最旧帖子</li> <li>新最帖子</li> <li>旧最帖子</li> </ul> <div id="tab"> <ul id="tabnav02"> <li>最新精华帖</li> <li>最新帖子</li> <li>最旧帖子</li> <li>新最帖子</li> <li>旧最帖子</li> </ul> <div id="tabcon_1"> 1 </div> <div id="tabcon_2"> 2 </div> <div id="tabcon_3"> 3 </div> <div id="tabcon_4"> 4 </div> <div id="tabcon_5"> 5 </div> <script type="text/javascript">  </script> </div> </div> </body> </html>

希望本文所述对大家的JavaScript程序设计有所帮助。