Js+Css 实现选项卡

最新推荐文章于 2020-05-15 13:43:48 发布
最新推荐文章于 2020-05-15 13:43:48 发布
阅读量664 收藏
点赞数
分类专栏： javascript 文章标签： css class div menu tabs float

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

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. width:460px;  
  32. margin:0px;  
  33. padding:0px;  
  34. margin:0 auto;}  
  35. /*选项卡2*/  
  36. #Tab2{  
  37. width:576px;  
  38. margin:0px;  
  39. padding:0px;  
  40. margin:0 auto;}  
  41. /*菜单class*/  
  42. .Menubox {  
  43. width: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.  width:114px;  
  57.  text-align:center;  
  58.  color:#949694;  
  59.  font-weight:bold;  
  60.  }  
  61. .Menubox li.hover{  
  62.  padding:0px;  
  63.  background:#fff;  
  64.  width: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>  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<title>简洁Tab</title>
<style type="text/css">
<!--
body,div,ul,li{
 padding:0;
 text-align:center;
}
body{
 font:12px "宋体";
 text-align:center;
}
a:link{
 color:#00F;
 text-decoration:none;
}
a:visited {
 color: #00F;
 text-decoration:none;
}
a:hover {
 color: #c00;
 text-decoration:underline;
}
ul{ list-style:none;}
/*选项卡1*/
#Tab1{
width:460px;
margin:0px;
padding:0px;
margin:0 auto;}
/*选项卡2*/
#Tab2{
width:576px;
margin:0px;
padding:0px;
margin:0 auto;}
/*菜单class*/
.Menubox {
width:100%;
background:url(http://www.hxcgw.com/bbs/upfile/20079299441652.gif);
height:28px;
line-height:28px;
}
.Menubox ul{
margin:0px;
padding:0px;
}
.Menubox li{
 float:left;
 display:block;
 cursor:pointer;
 width:114px;
 text-align:center;
 color:#949694;
 font-weight:bold;
 }
.Menubox li.hover{
 padding:0px;
 background:#fff;
 width:116px;
 border-left:1px solid #A8C29F;
 border-top:1px solid #A8C29F;
 border-right:1px solid #A8C29F;
background:url(http://www.hxcgw.com/bbs/upfile/200792994426548.gif);
 color:#739242;
 font-weight:bold;
 height:27px;
line-height:27px;
}
.Contentbox{
 clear:both;
 margin-top:0px;
 border:1px solid #A8C29F;
 border-top:none;
 height:181px;
 text-align:center;
 padding-top:8px;
}
-->
</style>
<script>
<!--
/*第一种形式 第二种形式 更换显示样式*/
function setTab(name,cursel,n){
 for(i=1;i<=n;i++){
  var menu=document.getElementById(name+i);
  var con=document.getElementById("con_"+name+"_"+i);
  menu.className=i==cursel?"hover":"";
  con.style.display=i==cursel?"block":"none";
 }
}
//-->
</script>
</head>
<body>
<br><br>
<div id="Tab1">
<div class="Menubox">
<ul>
   <li id="one1" οnclick="setTab('one',1,4)"  class="hover">新闻1</li>
   <li id="one2" οnclick="setTab('one',2,4)" >新闻2</li>
   <li id="one3" οnclick="setTab('one',3,4)">新闻3</li>
   <li id="one4" οnclick="setTab('one',4,4)">新闻4</li>
</ul>
</div>
 <div class="Contentbox">
   <div id="con_one_1" class="hover">新闻列表1</div>
   <div id="con_one_2" style="display:none">新闻列表2</div>
   <div id="con_one_3" style="display:none">新闻列表3</div>
   <div id="con_one_4" style="display:none">新闻列表4</div>
 </div>
</div>
<br>
<div id="Tab2">
<div class="Menubox">
<ul>
   <li id="two1" οnclick="setTab('two',1,4)"  class="hover">新闻1</li>
   <li id="two2" οnclick="setTab('two',2,4)" >新闻2</li>
   <li id="two3" οnclick="setTab('two',3,4)">新闻3</li>
   <li id="two4" οnclick="setTab('two',4,4)">新闻4</li>
</ul>
</div>
 <div class="Contentbox">
   <div id="con_two_1" >新闻列表1</div>
   <div id="con_two_2" style="display:none">新闻列表2</div>
   <div id="con_two_3" style="display:none">新闻列表3</div>
   <div id="con_two_4" style="display:none">新闻列表4</div>
 </div>
</div>
</body>
</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. width:460px;  
  32. margin:0px;  
  33. padding:0px;  
  34. margin:0 auto;}  
  35. /*选项卡2*/  
  36. #Tab2{  
  37. width:576px;  
  38. margin:0px;  
  39. padding:0px;  
  40. margin:0 auto;}  
  41. /*菜单class*/  
  42. .Menubox {  
  43. width: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.  width:114px;  
  57.  text-align:center;  
  58.  color:#949694;  
  59.  font-weight:bold;  
  60.  }  
  61. .Menubox li.hover{  
  62.  padding:0px;  
  63.  background:#fff;  
  64.  width: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>  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<title>简洁Tab</title>
<style type="text/css">
<!--
body,div,ul,li{
 padding:0;
 text-align:center;
}
body{
 font:12px "宋体";
 text-align:center;
}
a:link{
 color:#00F;
 text-decoration:none;
}
a:visited {
 color: #00F;
 text-decoration:none;
}
a:hover {
 color: #c00;
 text-decoration:underline;
}
ul{ list-style:none;}
/*选项卡1*/
#Tab1{
width:460px;
margin:0px;
padding:0px;
margin:0 auto;}
/*选项卡2*/
#Tab2{
width:576px;
margin:0px;
padding:0px;
margin:0 auto;}
/*菜单class*/
.Menubox {
width:100%;
background:url(http://www.hxcgw.com/bbs/upfile/20079299441652.gif);
height:28px;
line-height:28px;
}
.Menubox ul{
margin:0px;
padding:0px;
}
.Menubox li{
 float:left;
 display:block;
 cursor:pointer;
 width:114px;
 text-align:center;
 color:#949694;
 font-weight:bold;
 }
.Menubox li.hover{
 padding:0px;
 background:#fff;
 width:116px;
 border-left:1px solid #A8C29F;
 border-top:1px solid #A8C29F;
 border-right:1px solid #A8C29F;
background:url(http://www.hxcgw.com/bbs/upfile/200792994426548.gif);
 color:#739242;
 font-weight:bold;
 height:27px;
line-height:27px;
}
.Contentbox{
 clear:both;
 margin-top:0px;
 border:1px solid #A8C29F;
 border-top:none;
 height:181px;
 text-align:center;
 padding-top:8px;
}
-->
</style>
<script>
<!--
/*第一种形式 第二种形式 更换显示样式*/
function setTab(name,cursel,n){
 for(i=1;i<=n;i++){
  var menu=document.getElementById(name+i);
  var con=document.getElementById("con_"+name+"_"+i);
  menu.className=i==cursel?"hover":"";
  con.style.display=i==cursel?"block":"none";
 }
}
//-->
</script>
</head>
<body>
<br><br>
<div id="Tab1">
<div class="Menubox">
<ul>
   <li id="one1" οnmοuseοver="setTab('one',1,4)"  class="hover">新闻1</li>
   <li id="one2" οnmοuseοver="setTab('one',2,4)" >新闻2</li>
   <li id="one3" οnmοuseοver="setTab('one',3,4)">新闻3</li>
   <li id="one4" οnmοuseοver="setTab('one',4,4)">新闻4</li>
</ul>
</div>
 <div class="Contentbox">
   <div id="con_one_1" class="hover">新闻列表1</div>
   <div id="con_one_2" style="display:none">新闻列表2</div>
   <div id="con_one_3" style="display:none">新闻列表3</div>
   <div id="con_one_4" style="display:none">新闻列表4</div>
 </div>
</div>
<br>
<div id="Tab2">
<div class="Menubox">
<ul>
   <li id="two1" οnmοuseοver="setTab('two',1,4)"  class="hover">新闻1</li>
   <li id="two2" οnmοuseοver="setTab('two',2,4)" >新闻2</li>
   <li id="two3" οnmοuseοver="setTab('two',3,4)">新闻3</li>
   <li id="two4" οnmοuseοver="setTab('two',4,4)">新闻4</li>
</ul>
</div>
 <div class="Contentbox">
   <div id="con_two_1" >新闻列表1</div>
   <div id="con_two_2" style="display:none">新闻列表2</div>
   <div id="con_two_3" style="display:none">新闻列表3</div>
   <div id="con_two_4" style="display:none">新闻列表4</div>
 </div>
</div>
</body>
</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.  width: 400px;  
  40.  border: 1px solid #cbcbcb;  
  41.  background-color: #f2f6fb;  
  42. }  
  43. .menu0{  
  44.  width: 400px;  
  45. }  
  46. .menu0 li{  
  47.  display:block;  
  48.  float: left;  
  49.  padding: 4px 0;  
  50.  width: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.  width:400px;  
  68. }  
  69. .menu1box{  
  70.  position:relative;  
  71.  overflow:hidden;  
  72.  height:22px;  
  73.  width: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.  width: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.  width: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.  width:400px;  
  116.  text-align:left;  
  117.  background: #FFFFff;  
  118. }  
  119. #tabs2 {  
  120.  height: 200px;  
  121.  width: 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.  width: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.  width: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>  
<!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>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<title>简洁Tab</title>
<style type="text/css">
<!--
body,div,ul,li{
 margin:0 auto;
 padding:0;
}
body{
 font:12px "宋体";
 text-align:center;
}
a:link{
 color:#00F;
 text-decoration:none;
}
a:visited {
 color: #00F;
 text-decoration:none;
}
a:hover {
 color: #c00;
 text-decoration:underline;
}
ul{
 list-style:none;
}
.main{
 clear:both;
 padding:8px;
 text-align:center;
}
/*第一种形式*/
#tabs0 {
 height: 200px;
 width: 400px;
 border: 1px solid #cbcbcb;
 background-color: #f2f6fb;
}
.menu0{
 width: 400px;
}
.menu0 li{
 display:block;
 float: left;
 padding: 4px 0;
 width:100px;
 text-align: center;
 cursor:pointer;
 background: #FFFFff;
}
.menu0 li.hover{
 background: #f2f6fb;
}
#main0 ul{
 display: none;
}
#main0 ul.block{
 display: block;
}
/*第二种形式*/
#tabs1{
 text-align:left;
 width:400px;
}
.menu1box{
 position:relative;
 overflow:hidden;
 height:22px;
 width:400px;
 text-align:left;
}
#menu1{
 position:absolute;
 top:0;
 left:0;
 z-index:1;
}
#menu1 li{
 float:left;
 display:block;
 cursor:pointer;
 width:72px;
 text-align:center;
 line-height:21px;
 height:21px;
}
#menu1 li.hover{
 background:#fff;
 border-left:1px solid #333;
 border-top:1px solid #333;
 border-right:1px solid #333;
}
.main1box{
 clear:both;
 margin-top:-1px;
 border:1px solid #333;
 height:181px;
 width:400px;
}
#main1 ul{
 display: none;
}
#main1 ul.block{
 display: block;
}
/*第三种形式*/
.menu2box{
 position:relative;
 overflow:hidden;
 height:22px;
 width:400px;
 text-align:left;
 background: #FFFFff;
}
#tabs2 {
 height: 200px;
 width: 400px;
 border: 1px solid #cbcbcb;
 background-color: #f2f6fb;
}
#tip2{
 position:absolute;
 top:0;
 left:0;
 height:22px;
 line-height:22px;
 z-index:0;
 width:100px;
 background: #f2f6fb;
}
#menu2{
 position:absolute;
 top:0;
 left:0;
 z-index:1;
}
#menu2 li{
 display:block;
 float: left;
 padding: 4px 0;
 width:100px;
 text-align: center;
 cursor:pointer;
}
-->
</style>
<script>
<!--
/*第一种形式 第二种形式 更换显示样式*/
function setTab(m,n){
 var tli=document.getElementById("menu"+m).getElementsByTagName("li");
 var mli=document.getElementById("main"+m).getElementsByTagName("ul");
 for(i=0;i<tli.length;i++){
  tli[i].className=i==n?"hover":"";
  mli[i].style.display=i==n?"block":"none";
 }
}
/*第三种形式 利用一个背景层定位*/
var m3={0:"",1:"评论内容",2:"技术内容",3:"点评内容"}
function nowtab(m,n){
 if(n!=0&&m3[0]=="")m3[0]=document.getElementById("main2").innerHTML;
 document.getElementById("tip"+m).style.left=n*100+'px';
 document.getElementById("main2").innerHTML=m3[n];
}
//-->
</script>
</head>
<body>
<br />
<br />
<!--第一种形式-->
<div id="tabs0">
 <ul class="menu0" id="menu0">
  <li οnclick="setTab(0,0)" class="hover">新闻</li>
  <li οnclick="setTab(0,1)">评论</li>
  <li οnclick="setTab(0,2)">技术</li>
  <li οnclick="setTab(0,3)">点评</li>
 </ul>
 <div class="main" id="main0">
  <ul class="block"><li>新闻列表</li></ul>
  <ul><li>评论列表</li></ul>
  <ul><li>技术列表</li></ul>
  <ul><li>点评列表</li></ul>
 </div>
</div>
<br />
<br />
<!--第二种形式-->
<div id="tabs1">
 <div class="menu1box">
  <ul id="menu1">
   <li class="hover" οnmοuseοver="setTab(1,0)"><a href="#">新闻</a></li>
   <li οnmοuseοver="setTab(1,1)"><a href="#">评论</a></li>
   <li οnmοuseοver="setTab(1,2)"><a href="#">技术</a></li>
   <li οnmοuseοver="setTab(1,3)"><a href="#">点评</a></li>
  </ul>
 </div>
 <div class="main1box">
  <div class="main" id="main1">
   <ul class="block"><li>新闻列表</li></ul>
   <ul><li>评论列表</li></ul>
   <ul><li>技术列表</li></ul>
   <ul><li>点评列表</li></ul>
  </div>
 </div>
</div>
<br />
<br />
<!--第三种形式-->
<div id="tabs2">
 <div class="menu2box">
  <div id="tip2"></div>
  <ul id="menu2">
   <li class="hover" οnmοuseοver="nowtab(2,0)"><a href="#">新闻</a></li>
   <li οnmοuseοver="nowtab(2,1)"><a href="#">评论</a></li>
   <li οnmοuseοver="nowtab(2,2)"><a href="#">技术</a></li>
   <li οnmοuseοver="nowtab(2,3)"><a href="#">点评</a></li>
  </ul>
 </div>
  <div class="main" id="main2">
新闻内容
 </div>
</div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</body>
</html>



原文地址：http://qichunren.javaeye.com/blog/234032
                 http://www.roredu.com/rubyrails/2008/07/24/css-nav/

kinglino520
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript加Css简单的选项卡
qq_43293739的博客
03-04 278
本文介绍一种使用JavaScript+Css设计生成的选项卡效果，只是这里的选项卡是静态的！ 制作过程很简单，这里我使用的语言是asp.net（vs2010）. 1.在新建的.aspx网页body标签中，写入下列代码 这是第一个选项卡，欢迎光临！ 这是第二个选项卡，欢迎来访！ ...
通过jquery+css实现选项卡功能
05-07
本教程将详细介绍如何利用jQuery和CSS技术来创建一款功能完善的选项卡组件，并且需要引入jQuery UI库以增强其表现力和可用性。 首先，我们需要在HTML中设置选项卡的基本结构。这通常包括一个包含所有选项标题的容器...
TabControl--js+css实现静态选项卡效果
10-05
网易、新浪等大型网站的首页都会采用一些选项卡效果，点击不同的选项，会显示相应的信息，这里实现了一种用js+css实现的静态选项卡效果。
JS+CSS实现选项卡功能
weixin_30480075的博客
04-16 75
【小小一记】 首先我们写一个选项卡的结构出来，包括tab和content： 首先是tab： <ul class="ttitle-box-tabs" id="tabs1"> <li id="tab1" class="on"> <a href="###" onmouseover="switchTab('tab1','content1'...
js+CSS 实现选项卡
光着脚丫、走的专栏
08-28 436
遇到万恶的手写选项卡= =！ js控制调用样式 function display(obj){ if(obj=="1"){ //document.getElementById("XX_id").style.display="none";//隐藏 //document.getElementById("XXX_id").style.display
css+js实现选项卡
张海宁的专栏
02-23 411
css-选项卡 ul{ width:300px; position:relative; list-style-type:none; margin-left:-40px; z-index:2; } ul li{ border-left-width:1px; border-top-width:1px; border-right-width:1px; border-botto
js+css实现切换选项卡代码
10-16
本文将详细介绍如何使用JavaScript（js）和层叠样式表（css）来实现一个简单的选项卡切换功能，并通过分析`demo.html`文件来展示具体的实现步骤。 首先，我们需要在HTML文件中创建基本的结构。一个典型的选项卡布局...
JS+CSS实现自适应选项卡宽度的圆角滑动门效果
11-25
在本文中，我们将探讨如何使用JavaScript (JS) 和 Cascading Style Sheets (CSS) 来创建一个自适应选项卡宽度的圆角滑动门效果。这种效果使得无论选项卡中的文字内容有多少，它们都能保持一致的宽度，而不会因内容...
js+css实现的圆角边框TAB选项卡滑动门代码分享（2款）
01-21
本文实例讲述了js+css实现的圆角边框TAB选项卡滑动门效果。实例包含两款CSS圆角代码，可鼠标点击，也可鼠标移动上去显示效果，分享给大家供大家参考。具体如下： 运行效果图：——————-查看效果——————- ...
ASP.NET源码——网页选项卡(div+CSS).zip
10-10
在这个"ASP.NET源码——网页选项卡(div+CSS).zip"压缩包中，我们主要关注的是如何在ASP.NET中实现基于div和CSS的网页选项卡功能。 选项卡是网页设计中常用的一种交互元素，它帮助用户在有限的空间内组织和展示多个...
CSS+JS选项卡式导航菜单
03-18
NULL 博文链接：https://gucy.iteye.com/blog/656366
div+css js选项卡
chuzhenbin的专栏
05-06 547
转自：http://zisetoufa.iteye.com/blog/966512     DIV+CSS选项卡演示-爱JavaScript中文网 /*TAB布局*/ #tab * {font-size:12px;} #tab h3 a {display:inline-block;} #tab h3 a {display:bl
用js和css实现选项卡效果
08-19 128
1效果图： 2代码： html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <...
div+css+js选项卡
bj_dxd的专栏
12-06 162
无标题文档 基本信息 姓名： 性别：...
HTML+CSS+JS实现选项卡
凌晨1点21分的专栏
03-04 770
今天学习的时候写一个选项卡，献上代码和截图
切换选项卡+js+css+html
ruiguang21的博客
12-04 589
无标题文档   .container {             width: 800px;             height: 600px;             border: 2px solid #000;         } .grade-list {             height: 40px;             border-bottom: 1
html+css实现选项卡功能
热门推荐
JarvisLau的博客
04-14 1万+
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> meta http-equiv="Content-Typ
前端：JS/30/综合实例：选项卡（HTML，CSS，JS）
Java_53的博客
05-15 217
综合实例：选项卡（HTML，CSS，JS） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>JS综合实例_选项卡_HTML_CSS_JS</title> &lt
用html+css+js实现选项卡切换效果
anshuyou4769的博客
10-31 806
实现一个新闻门户网站上的常见选项卡效果： 文字素材:房产： 275万购昌平邻铁三居 总价20万买一居 200万内购五环三居 140万安家东三环 北京首现零首付楼盘 53万购东5环50平 京楼盘直降5000 中信府 公园楼王现房家居: 40平出租屋大改造 美少女的混搭小窝 经典清新简欧爱家 90平老房焕发新生 新中式的酷色温情 66平撞...
JavaScript实现高度通用的选项卡功能
"基于JavaScript实现通用tab选项卡(通用性强)" 本文将详细介绍如何使用JavaScript来实现一个通用的选项卡功能，这种功能广泛应用于各类网站，用于分类展示内容或优化页面空间利用。通用选项卡设计的目标是确保其...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值