CSS实现横向、竖向两个选项卡联动_网页代码站(www.webdm.cn)
2010-12-23 14:33
901 查看
<!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> <title>CSS实现横向、竖向两个选项卡联动_网页代码站(www.webdm.cn)</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> <a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码!
文章来自:http://www.webdm.cn/webcode/1b57b0a4-02bc-490b-a752-c06c2f7e6955.html
相关文章推荐
- CSS实现横向、竖向两个选项卡联动_网页代码站(www.webdm.cn)
- 去一家公司面试时候即兴用CSS实现横向二级菜单_网页代码站(www.webdm.cn)
- 用JavaScript实现横向滑出的多级竖向菜单_网页代码站(www.webdm.cn)
- 采用CSS+JS实现简洁的滑动导航栏_网页代码站(www.webdm.cn)
- 横向三级展开的CSS垂直菜单_网页代码站(www.webdm.cn)
- 收缩展开的竖直菜单(利用JS+CSS实现_网页代码站(www.webdm.cn)
- 横向滑动特效的菜单(js+css)_网页代码站(www.webdm.cn)
- css打造的又一款清新的横排下拉菜单_网页代码站(www.webdm.cn)
- 只用CSS打造符合标准型下拉菜单_网页代码站(www.webdm.cn)
- 竖向简洁的折叠菜单_网页代码站(www.webdm.cn)
- 简单的一个CSS菜单,不用图片也很好看_网页代码站(www.webdm.cn)
- 鼠标指向变成英文导航(CSS)_网页代码站(www.webdm.cn)
- 类似雅虎站的CSS滑动门切换_网页代码站(www.webdm.cn)
- 鼠标指向后向上展开的多级CSS菜单代码_网页代码站(www.webdm.cn)
- Flash竖向大焦点图代码_网页代码站(www.webdm.cn)
- JS实现横向与竖向两个选项卡Tab联动的方法
- 无图版CSS 滑动门,大多数门户都在用_网页代码站(www.webdm.cn)
- 横线从中间穿过的CSS菜单_网页代码站(www.webdm.cn)
- 有颜色标记的Css导航菜单_网页代码站(www.webdm.cn)<
- 仿msn风格的选项卡_网页代码站(www.webdm.cn)