漂亮css选项卡效果大全 [转]

ruby on rails框架集成了大量的web2.0效果，结合现在网站大量使用选项卡效果，我们也得让我们的ror项目结合潮流，下面有多个实例供大家参考使用：
1：仿126邮箱选项卡 鼠标点击

Html代码 复制代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" >  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html;charset=gb2312" />  
  5. <title>简洁Tab</title>  
  6. <style type="text/css">  
  7. <!--   
  8. body,div,ul,li{   
  9.  padding:0;   
  10.  text-align:center;   
  11. }   
  12. body{   
  13.  font:12px "宋体";   
  14.  text-align:center;   
  15. }   
  16. a:link{   
  17.  color:#00F;   
  18.  text-decoration:none;   
  19. }   
  20. a:visited {   
  21.  color: #00F;   
  22.  text-decoration:none;   
  23. }   
  24. a:hover {   
  25.  color: #c00;   
  26.  text-decoration:underline;   
  27. }   
  28. ul{ list-style:none;}   
  29. /*选项卡1*/   
  30. #Tab1{   
  31. 460px;   
  32. margin:0px;   
  33. padding:0px;   
  34. margin:0 auto;}   
  35. /*选项卡2*/   
  36. #Tab2{   
  37. 576px;   
  38. margin:0px;   
  39. padding:0px;   
  40. margin:0 auto;}   
  41. /*菜单class*/   
  42. .Menubox {   
  43. 100%;   
  44. background:url(http://www.hxcgw.com/bbs/upfile/20079299441652.gif);   
  45. height:28px;   
  46. line-height:28px;   
  47. }   
  48. .Menubox ul{   
  49. margin:0px;   
  50. padding:0px;   
  51. }   
  52. .Menubox li{   
  53.  float:left;   
  54.  display:block;   
  55.  cursor:pointer;   
  56.  114px;   
  57.  text-align:center;   
  58.  color:#949694;   
  59.  font-weight:bold;   
  60.  }   
  61. .Menubox li.hover{   
  62.  padding:0px;   
  63.  background:#fff;   
  64.  116px;   
  65.  border-left:1px solid #A8C29F;   
  66.  border-top:1px solid #A8C29F;   
  67.  border-right:1px solid #A8C29F;   
  68. background:url(http://www.hxcgw.com/bbs/upfile/200792994426548.gif);   
  69.  color:#739242;   
  70.  font-weight:bold;   
  71.  height:27px;   
  72. line-height:27px;   
  73. }   
  74. .Contentbox{   
  75.  clear:both;   
  76.  margin-top:0px;   
  77.  border:1px solid #A8C29F;   
  78.  border-top:none;   
  79.  height:181px;   
  80.  text-align:center;   
  81.  padding-top:8px;   
  82. }   
  83. -->  
  84. </style>  
  85. <script>  
  86. <!--   
  87. /*第一种形式 第二种形式 更换显示样式*/   
  88. function setTab(name,cursel,n){   
  89.  for(i=1;i<=n;i++){   
  90.   var menu=document.getElementById(name+i);   
  91.   var con=document.getElementById("con_"+name+"_"+i);   
  92.   menu.className=i==cursel?"hover":"";   
  93.   con.style.display=i==cursel?"block":"none";   
  94.  }   
  95. }   
  96. //-->  
  97. </script>  
  98. </head>  
  99. <body>  
  100. <br><br>  
  101. <div id="Tab1">  
  102. <div class="Menubox">  
  103. <ul>  
  104.    <li id="one1" onclick="setTab('one',1,4)"  class="hover">新闻1</li>  
  105.    <li id="one2" onclick="setTab('one',2,4)" >新闻2</li>  
  106.    <li id="one3" onclick="setTab('one',3,4)">新闻3</li>  
  107.    <li id="one4" onclick="setTab('one',4,4)">新闻4</li>  
  108. </ul>  
  109. </div>  
  110.  <div class="Contentbox">  
  111.    <div id="con_one_1" class="hover">新闻列表1</div>  
  112.    <div id="con_one_2" style="display:none">新闻列表2</div>  
  113.    <div id="con_one_3" style="display:none">新闻列表3</div>  
  114.    <div id="con_one_4" style="display:none">新闻列表4</div>  
  115.  </div>  
  116. </div>  
  117. <br>  
  118. <div id="Tab2">  
  119. <div class="Menubox">  
  120. <ul>  
  121.    <li id="two1" onclick="setTab('two',1,4)"  class="hover">新闻1</li>  
  122.    <li id="two2" onclick="setTab('two',2,4)" >新闻2</li>  
  123.    <li id="two3" onclick="setTab('two',3,4)">新闻3</li>  
  124.    <li id="two4" onclick="setTab('two',4,4)">新闻4</li>  
  125. </ul>  
  126. </div>  
  127.  <div class="Contentbox">  
  128.    <div id="con_two_1" >新闻列表1</div>  
  129.    <div id="con_two_2" style="display:none">新闻列表2</div>  
  130.    <div id="con_two_3" style="display:none">新闻列表3</div>  
  131.    <div id="con_two_4" style="display:none">新闻列表4</div>  
  132.  </div>  
  133. </div>  
  134. </body>  
  135. </html>  

2：鼠标经过的
Html代码 复制代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" >  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html;charset=gb2312" />  
  5. <title>简洁Tab</title>  
  6. <style type="text/css">  
  7. <!--   
  8. body,div,ul,li{   
  9.  padding:0;   
  10.  text-align:center;   
  11. }   
  12. body{   
  13.  font:12px "宋体";   
  14.  text-align:center;   
  15. }   
  16. a:link{   
  17.  color:#00F;   
  18.  text-decoration:none;   
  19. }   
  20. a:visited {   
  21.  color: #00F;   
  22.  text-decoration:none;   
  23. }   
  24. a:hover {   
  25.  color: #c00;   
  26.  text-decoration:underline;   
  27. }   
  28. ul{ list-style:none;}   
  29. /*选项卡1*/   
  30. #Tab1{   
  31. 460px;   
  32. margin:0px;   
  33. padding:0px;   
  34. margin:0 auto;}   
  35. /*选项卡2*/   
  36. #Tab2{   
  37. 576px;   
  38. margin:0px;   
  39. padding:0px;   
  40. margin:0 auto;}   
  41. /*菜单class*/   
  42. .Menubox {   
  43. 100%;   
  44. background:url(http://www.hxcgw.com/bbs/upfile/20079299441652.gif);   
  45. height:28px;   
  46. line-height:28px;   
  47. }   
  48. .Menubox ul{   
  49. margin:0px;   
  50. padding:0px;   
  51. }   
  52. .Menubox li{   
  53.  float:left;   
  54.  display:block;   
  55.  cursor:pointer;   
  56.  114px;   
  57.  text-align:center;   
  58.  color:#949694;   
  59.  font-weight:bold;   
  60.  }   
  61. .Menubox li.hover{   
  62.  padding:0px;   
  63.  background:#fff;   
  64.  116px;   
  65.  border-left:1px solid #A8C29F;   
  66.  border-top:1px solid #A8C29F;   
  67.  border-right:1px solid #A8C29F;   
  68. background:url(http://www.hxcgw.com/bbs/upfile/200792994426548.gif);   
  69.  color:#739242;   
  70.  font-weight:bold;   
  71.  height:27px;   
  72. line-height:27px;   
  73. }   
  74. .Contentbox{   
  75.  clear:both;   
  76.  margin-top:0px;   
  77.  border:1px solid #A8C29F;   
  78.  border-top:none;   
  79.  height:181px;   
  80.  text-align:center;   
  81.  padding-top:8px;   
  82. }   
  83. -->  
  84. </style>  
  85. <script>  
  86. <!--   
  87. /*第一种形式 第二种形式 更换显示样式*/   
  88. function setTab(name,cursel,n){   
  89.  for(i=1;i<=n;i++){   
  90.   var menu=document.getElementById(name+i);   
  91.   var con=document.getElementById("con_"+name+"_"+i);   
  92.   menu.className=i==cursel?"hover":"";   
  93.   con.style.display=i==cursel?"block":"none";   
  94.  }   
  95. }   
  96. //-->  
  97. </script>  
  98. </head>  
  99. <body>  
  100. <br><br>  
  101. <div id="Tab1">  
  102. <div class="Menubox">  
  103. <ul>  
  104.    <li id="one1" onmouseover="setTab('one',1,4)"  class="hover">新闻1</li>  
  105.    <li id="one2" onmouseover="setTab('one',2,4)" >新闻2</li>  
  106.    <li id="one3" onmouseover="setTab('one',3,4)">新闻3</li>  
  107.    <li id="one4" onmouseover="setTab('one',4,4)">新闻4</li>  
  108. </ul>  
  109. </div>  
  110.  <div class="Contentbox">  
  111.    <div id="con_one_1" class="hover">新闻列表1</div>  
  112.    <div id="con_one_2" style="display:none">新闻列表2</div>  
  113.    <div id="con_one_3" style="display:none">新闻列表3</div>  
  114.    <div id="con_one_4" style="display:none">新闻列表4</div>  
  115.  </div>  
  116. </div>  
  117. <br>  
  118. <div id="Tab2">  
  119. <div class="Menubox">  
  120. <ul>  
  121.    <li id="two1" onmouseover="setTab('two',1,4)"  class="hover">新闻1</li>  
  122.    <li id="two2" onmouseover="setTab('two',2,4)" >新闻2</li>  
  123.    <li id="two3" onmouseover="setTab('two',3,4)">新闻3</li>  
  124.    <li id="two4" onmouseover="setTab('two',4,4)">新闻4</li>  
  125. </ul>  
  126. </div>  
  127.  <div class="Contentbox">  
  128.    <div id="con_two_1" >新闻列表1</div>  
  129.    <div id="con_two_2" style="display:none">新闻列表2</div>  
  130.    <div id="con_two_3" style="display:none">新闻列表3</div>  
  131.    <div id="con_two_4" style="display:none">新闻列表4</div>  
  132.  </div>  
  133. </div>  
  134. </body>  
  135. </html>  

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