简洁纯CSS的TAB

前几天为做江阴印刷网的侧边TAB，找到了下面的代码

  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
  4. <title>简洁Tab</title>
  5. <style type="text/css">
  6. <!--
  7. body,div,ul,li{
  8. margin:0 auto;
  9. padding:0;
  10. }
  11. body{
  12. font:12px "宋体";
  13. text-align:center;
  14. }
  15. a:link{
  16. color:#00F;
  17. text-decoration:none;
  18. }
  19. a:visited {
  20. color: #00F;
  21. text-decoration:none;
  22. }
  23. a:hover {
  24. color: #c00;
  25. text-decoration:underline;
  26. }
  27. ul{
  28. list-style:none;
  29. }
  30. .main{
  31. clear:both;
  32. padding:8px;
  33. text-align:center;
  34. }
  35. /*第一种形式*/
  36. #tabs0 {
  37. height: 200px;
  38. width: 400px;
  39. border: 1px solid #cbcbcb;
  40. background-color: #f2f6fb;
  41. }
  42. .menu0{
  43. width: 400px;
  44. }
  45. .menu0 li{
  46. display:block;
  47. float: left;
  48. padding: 4px 0;
  49. width:100px;
  50. text-align: center;
  51. cursor:pointer;
  52. background: #FFFFff;
  53. }
  54. .menu0 li.hover{
  55. background: #f2f6fb;
  56. }
  57. #main0 ul{
  58. display: none;
  59. }
  60. #main0 ul.block{
  61. display: block;
  62. }
  63. /*第二种形式*/
  64. #tabs1{
  65. text-align:left;
  66. width:400px;
  67. }
  68. .menu1box{
  69. position:relative;
  70. overflow:hidden;
  71. height:22px;
  72. width:400px;
  73. text-align:left;
  74. }
  75. #menu1{
  76. position:absolute;
  77. top:0;
  78. left:0;
  79. z-index:1;
  80. }
  81. #menu1 li{
  82. float:left;
  83. display:block;
  84. cursor:pointer;
  85. width:72px;
  86. text-align:center;
  87. line-height:21px;
  88. height:21px;
  89. }
  90. #menu1 li.hover{
  91. background:#fff;
  92. border-left:1px solid #333;
  93. border-top:1px solid #333;
  94. border-right:1px solid #333;
  95. }
  96. .main1box{
  97. clear:both;
  98. margin-top:-1px;
  99. border:1px solid #333;
  100. height:181px;
  101. width:400px;
  102. }
  103. #main1 ul{
  104. display: none;
  105. }
  106. #main1 ul.block{
  107. display: block;
  108. }
  109. /*第三种形式*/
  110. .menu2box{
  111. position:relative;
  112. overflow:hidden;
  113. height:22px;
  114. width:400px;
  115. text-align:left;
  116. background: #FFFFff;
  117. }
  118. #tabs2 {
  119. height: 200px;
  120. width: 400px;
  121. border: 1px solid #cbcbcb;
  122. background-color: #f2f6fb;
  123. }
  124. #tip2{
  125. position:absolute;
  126. top:0;
  127. left:0;
  128. height:22px;
  129. line-height:22px;
  130. z-index:0;
  131. width:100px;
  132. background: #f2f6fb;
  133. }
  134. #menu2{
  135. position:absolute;
  136. top:0;
  137. left:0;
  138. z-index:1;
  139. }
  140. #menu2 li{
  141. display:block;
  142. float: left;
  143. padding: 4px 0;
  144. width:100px;
  145. text-align: center;
  146. cursor:pointer;
  147. }
  148. -->
  149. </style>
  150. <script>
  151. <!--
  152. /*第一种形式 第二种形式 更换显示样式*/
  153. function setTab(m,n){
  154. var tli=document.getElementById("menu"+m).getElementsByTagName("li");
  155. var mli=document.getElementById("main"+m).getElementsByTagName("ul");
  156. for(i=0;i<tli.length;i++){
  157.    tli[i].className=i==n?"hover":"";
  158.    mli[i].style.display=i==n?"block":"none";
  159. }
  160. }
  161. /*第三种形式 利用一个背景层定位*/
  162. var m3={0:"",1:"评论内容",2:"技术内容",3:"点评内容"}
  163. function nowtab(m,n){
  164. if(n!=0&&m3[0]=="")m3[0]=document.getElementById("main2").innerHTML;
  165. document.getElementById("tip"+m).style.left=n*100+'px';
  166. document.getElementById("main2").innerHTML=m3[n];
  167. }
  168. //-->
  169. </script>
  170. </head>
  171. <body>
  172. <br />
  173. <br />
  174. <!--第一种形式-->
  175. <div id="tabs0">
  176. <ul class="menu0" id="menu0">
  177.    <li onclick="setTab(0,0)" class="hover">新闻</li>
  178.    <li onclick="setTab(0,1)">评论</li>
  179.    <li onclick="setTab(0,2)">技术</li>
  180.    <li onclick="setTab(0,3)">点评</li>
  181. </ul>
  182. <div class="main" id="main0">
  183.    <ul class="block"><li>新闻列表</li></ul>
  184.    <ul><li>评论列表</li></ul>
  185.    <ul><li>技术列表</li></ul>
  186.    <ul><li>点评列表</li></ul>
  187. </div>
  188. </div>
  189. <br />
  190. <br />
  191. <!--第二种形式-->
  192. <div id="tabs1">
  193. <div class="menu1box">
  194.    <ul id="menu1">
  195.     <li class="hover" onmouseover="setTab(1,0)"><a href="#">新闻</a></li>
  196.     <li onmouseover="setTab(1,1)"><a href="#">评论</a></li>
  197.     <li onmouseover="setTab(1,2)"><a href="#">技术</a></li>
  198.     <li onmouseover="setTab(1,3)"><a href="#">点评</a></li>
  199.    </ul>
  200. </div>
  201. <div class="main1box">
  202.    <div class="main" id="main1">
  203.     <ul class="block"><li>新闻列表</li></ul>
  204.     <ul><li>评论列表</li></ul>
  205.     <ul><li>技术列表</li></ul>
  206.     <ul><li>点评列表</li></ul>
  207.    </div>
  208. </div>
  209. </div>
  210. <br />
  211. <br />
  212. <!--第三种形式-->
  213. <div id="tabs2">
  214. <div class="menu2box">
  215.    <div id="tip2"></div>
  216.    <ul id="menu2">
  217.     <li class="hover" onmouseover="nowtab(2,0)"><a href="#">新闻</a></li>
  218.     <li onmouseover="nowtab(2,1)"><a href="#">评论</a></li>
  219.     <li onmouseover="nowtab(2,2)"><a href="#">技术</a></li>
  220.     <li onmouseover="nowtab(2,3)"><a href="#">点评</a></li>
  221.    </ul>
  222. </div>
  223.    <div class="main" id="main2">
  224. 新闻内容
  225. </div>
  226. </div>
  227. </body>
  228. </html>

收藏自：http://kudrong.cn/article.asp?id=141

2009-01-15 网页制作 909 人浏览 1 Comment ,

相似日志:

Feed 发表评论 引用 Del.icio.us Google书签 Digg Live Bookmark Technorati Furl Yahoo书签 Facebook 百度搜藏 新浪ViVi 365Key网摘 天极网摘 和讯网摘 博拉网 POCO网摘 添加到饭否 QQ书签 Digbuzz我挖网

  1. Shawn says:
    2009年01月15日 at 12:58 下午

    晕，我以为纯css把tab都实现了，结果还是要靠js…

    回复回复

留下回复