仿msn风格的选项卡_网页代码站(www.webdm.cn)
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <title>仿msn风格的选项卡_网页代码站(www.webdm.cn)</title>
5 <style type="text/css">
6 body {text-align:center;color:#666;font-size:12px;font-family:tahoma,arial,sans-serif;}
7 h1, h2, h3, h4, h5, h6, form, div, p, i, img, ul, li, ol, table, tr, td,th, fieldset, label, legend,button,input { margin:0;padding:0;}
8 li{list-style:none;}
9 a img{border:none;}
10 a:link{text-decoration:none;color:#07519A;}
11 a:visited{text-decoration:none;color:#07519A;}
12 a:active,a:hover{text-decoration:underline;color:#07519A;}
13 .tarea0{float:left;height:220px;width:242px;}
14 .tarea{border:1px solid #ace;float:left;height:156px;text-align:center;width:242px;}
15 .tarea1{border:1px solid #ace;float:left;height:251px;text-align:center;width:242px;}
16 .tarea2{border:1px solid #ace;float:left;height:217px;text-align:center;width:243px;}
17 ul.tbtn li{background:#EBF3FB;border:1px solid #ace;border-left:none;border-
18
19 top:none;color:#07519A;cursor:pointer;display:block;float:left;height:25px;line-height:25px;text-align:center;text-
20
21 decoration:none;width:60px;background:url(http://www.webdm.cn/images/20090910/msfp_015.gif) repeat-x;}
22 ul.tbtn li:hover{text-decoration:underline;}
23 ul.tbtn li.curr{background:#fff;border-bottom-color:#fff;cursor:default;color:#666;}
24 .tbcon{margin:8px 0px 6px 8px;text-align:left;padding:8px;}
25 </style>
26 <script language="javascript" type="text/javascript">
27 function tabit(btn){
28 var idname = new String(btn.id);
29 var s = idname.indexOf("_");
30 var e = idname.lastIndexOf("_")+1;
31 var tabName = idname.substr(0, s);
32 var id = parseInt(idname.substr(e, 1));
33 var tabNumber = btn.parentNode.childNodes.length;
34 for(i=0;i<tabNumber;i++){
35 document.getElementById(tabName+"_div_"+i).style.display = "none";
36 document.getElementById(tabName+"_btn_"+i).className = "";
37 };
38 document.getElementById(tabName+"_div_"+id).style.display = "block";
39 btn.className = "curr";
40 };
41 </script>
42 </head>
43 <body>
44 <div class="tarea2" style="height:223px;">
45 <ul class="tbtn"><li onclick="tabit(this)" id="tabap1_btn_0" class="curr">最新上传</li><li onclick="tabit(this)" id="tabap1_btn_1">分类导
46
47 航</li><li onclick="tabit(this)" id="tabap1_btn_2">网页特效</li><li style="border-right:none;" onclick="tabit(this)" id="tabap1_btn_3">浏览排行
48
49 </li></ul>
50 <div class="clr"></div>
51 <div class="tbcon" id="tabap1_div_0">这里是最新上传的内容</div>
52 <div style="display: none;" class="tbcon" id="tabap1_div_1">这里是分类导航</div>
53 <div style="display: none;" class="tbcon" id="tabap1_div_2">网页特效的内容</div>
54 <div style="display: none;" class="tbcon" id="tabap1_div_3">浏览排行</div>
55 </div>
56 </body>
57 </html>
58
59 <a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码！
文章来自：http://www.webdm.cn/webcode/d496a062-ca46-42d9-a46c-129c0ec1d499.html
