1、圆角Tab切换
效果图：
View Code
1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2. <html>
3. <head>
4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
5. <title>tab切换（定宽，背景图片，最后一个tab对齐）</title>
6. <style type="text/css">
7. #box{width:320px;font-size:12px}
8. #box ul{margin:0;padding:0;list-style:none}
9. #box #tab{height:26px;border-bottom:1px solid #dfdfdf}
10. #box #tab li{width:100px;height:18px;padding-top:8px;margin-right:10px;text-align:center;float:left;cursor:pointer;position:relative;top:1px;background:url(/images/tab_bg.gif)}
11. #box #tab li.on{color:#00f;background-position:-110px 0}
12. #box #tab_con{border:1px solid #dfdfdf;border-top:none;padding:20px}
13. #box #tab_con li{display:none}
14. #box #tab_con #tab_con_1{display:block}
15. </style>
16. </head>
17.
18. <body>
19. <div id="box">
20. <ul id="tab">
21. <li class="on" id="tab_1" onClick="switchTab(1)">新闻</li>
22. <li id="tab_2" onClick="switchTab(2)">财经</li>
23. <li id="tab_3" onClick="switchTab(3)" style="margin:0">娱乐</li>
24. </ul>
25. <ul id="tab_con">
26. <li id="tab_con_1">新闻内容</li>
27. <li id="tab_con_2">财经内容</li>
28. <li id="tab_con_3">娱乐内容</li>
29. </ul>
30. </div>
31.
32. <script type="text/javascript">
33. function switchTab(n){
34. for(var i = 1; i <= 3; i++){
35. document.getElementById("tab_" + i).className = "";
36. document.getElementById("tab_con_" + i).style.display = "none";
37. }
38. document.getElementById("tab_" + n).className = "on";
39. document.getElementById("tab_con_" + n).style.display = "block";
40. }
41. </script>
42. </body>
43. </html>
2956
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
