本文实例讲述了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 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="tabnav02"> <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> <div id="tabcon_2" class="tabcon"> 2 </div> <div id="tabcon_3" class="tabcon"> 3 </div> <div id="tabcon_4" class="tabcon"> 4 </div> <div id="tabcon_5" class="tabcon"> 5 </div> <script type="text/javascript"> <!-- var h=document.getElementById("tabnav").getElementsByTagName("li"); var d=document.getElementById("tabnav02").getElementsByTagName("li"); function go_to(s){ for(var i=1;i<=h.length;i++){ if(s==i){ h[i-1].className="current"; d[i-1].className="current"; document.getElementById("tabcon_"+i).className="tabcon block"; } else{ h[i-1].className=""; d[i-1].className=""; document.getElementById("tabcon_"+i).className="tabcon"; } } } //--> </script> </div> </div> </body> </html>
希望本文所述对大家的JavaScript程序设计有所帮助。
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
暂无“JS实现横向与竖向两个选项卡Tab联动的方法”评论...
《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。
更新动态
20240519
20240519
- 群星1990-精装绕樑金曲集3CD[澳洲版][WAV+CUE]
- 张信哲《挚爱》首版金碟[低速原抓WAV分轨][437M]
- 张琼《情思(黑胶CD)》[WAV+CUE][675M]
- 群星《超好听流行音乐10CD》五星珍藏版[WAV+CUE][6.6G]
- 群星1990-经典金曲金中之金2CD[日本天龙版][WAV+CUE]
- 群星《2024好听新歌05》十倍音质WAV分轨
- 诹访内晶子AkikoSuwanai巴赫:小提琴协奏曲《J.S.BachViolinConcertos》(flac)
- 苏打绿《原汁原味》[320K/MP3][27.44MB]
- 苏打绿《原汁原味》[FLAC/分轨][73.86MB]
- 群星《青春重置计划9新的凡人歌》[320KMP3][89.41MB]
- 苏曼《苏曼的夜晚HQII》[低速原抓WAV+CUE]
- 【电影原声】汉斯·季默《星际穿越》2014[FLAC+CUE整轨]
- 诹访内晶子AkikoSuwanai巴赫:小提琴协奏曲《J.S.BachViolinConcertos》(flac)
- 王力宏《十八般武艺》[低速原抓WAV+CUE]
- 王力宏《十八般武艺》[低速原抓WAV+CUE]