程序博客网 > 百安居建材 知乎

三种简洁的Tab导航（网页选项卡）简析

来源：互联网 发布：百安居建材 知乎 编辑：程序博客网 时间：2024/04/30 20:16

在网页中应用选项卡可以使网页显得更紧凑，结合AJAX技术可以使页面在有限的空间内展现更多的内容。本文主要介绍几种简洁的选项卡效果的实现（不涉及滑动门和AJAX），附有实例，无图片，兼容性较好，方便大家直接使用。

 

第一种形式: 通过更换显示样式实现，这种很常见，就不多说了。

 

Html代码 复制代码
  1. <div id="tabs0">  
  2. <ul class="menu0" id="menu0">  
  3.   <li onclick="setTab(0,0)" class="hover">新闻</li>  
  4.   <li onclick="setTab(0,1)">评论</li>  
  5.   <li onclick="setTab(0,2)">技术</li>  
  6.   <li onclick="setTab(0,3)">点评</li>  
  7. </ul>  
  8. <div class="main" id="main0">  
  9.   <ul class="block"><li>新闻列表</li></ul>  
  10.   <ul><li>评论列表</li></ul>  
  11.   <ul><li>技术列表</li></ul>  
  12.   <ul><li>点评列表</li></ul>  
  13. </div>  
  14. </div>  

 

第二种形式: 这种结构比较复杂一些，外面加一个相对层(.menu1box)，设置溢出隐藏，将选项卡(#menu1)设为绝对定位，设置层指针为1(z-index:1;)，以便可以遮住下主区块(.main1box)1px的高度。设置主区块的边框为1px的黑边，上空白(margin-top)为-1px，使上边框伸到选项卡下。当改变选项卡某项(li)的背景为白色时便可遮住一部分主区块的上边框。这样效果就实现了。

Html代码 复制代码
  1. <div id="tabs1">  
  2. <div class="menu1box">  
  3.   <ul id="menu1">  
  4.    <li class="hover" onmouseover="setTab(1,0)"><a href="#">新闻</a></li>  
  5.    <li onmouseover="setTab(1,1)"><a href="#">评论</a></li>  
  6.    <li onmouseover="setTab(1,2)"><a href="#">技术</a></li>  
  7.    <li onmouseover="setTab(1,3)"><a href="#">点评</a></li>  
  8.   </ul>  
  9. </div>  
  10. <div class="main1box">  
  11.   <div class="main" id="main1">  
  12.    <ul class="block"><li>新闻列表</li></ul>  
  13.    <ul><li>评论列表</li></ul>  
  14.    <ul><li>技术列表</li></ul>  
  15.    <ul><li>点评列表</li></ul>  
  16.   </div>  
  17. </div>  
  18. </div>  

 

 

第一、二种形式的JS代码:

 

Js代码 复制代码
  1. function setTab(m,n){   
  2. var tli=document.getElementById("menu"+m).getElementsByTagName("li"); /*获取选项卡的LI对象*/  
  3. var mli=document.getElementById("main"+m).getElementsByTagName("ul"); /*获取主显示区域对象*/  
  4. for(i=0;i<tli.length;i++){   
  5.   tli[i].className=i==n?"hover":""; /*更改选项卡的LI对象的样式，如果是选定的项则使用.hover样式*/  
  6.   mli[i].style.display=i==n?"block":"none"; /*确定主区域显示哪一个对象*/  
  7. }   
  8. }  

 

 

第三种形式: 这也是一种不常用的方式，加一个相对层(.menu2box)，利用一个背景层(#tip2)定位，通过改变层的左距离(left)实现效果。

 

Html代码 复制代码
  1. <div id="tabs2">  
  2. <div class="menu2box">  
  3.   <div id="tip2"></div>  
  4.   <ul id="menu2">  
  5.    <li class="hover" onmouseover="nowtab(2,0)"><a href="#">新闻</a></li>  
  6.    <li onmouseover="nowtab(2,1)"><a href="#">评论</a></li>  
  7.    <li onmouseover="nowtab(2,2)"><a href="#">技术</a></li>  
  8.    <li onmouseover="nowtab(2,3)"><a href="#">点评</a></li>  
  9.   </ul>  
  10. </div>  
  11.   <div class="main" id="main2">  
  12. 新闻内容   
  13. </div>  

 

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>  
百安居建材 知乎 百安居建材 知乎
原创粉丝点击
热门IT博客
做淘宝商品视频教程做淘宝商品视频教程
星光大道网络直播星光大道网络直播
分布式视频矩阵
河北三金网络怎么样
ubuntu mate应用
java 获取电脑配置
flexible.js下载
诺基亚5300软件
移动网络电视怎么搜台
js实现图片360旋转
fm2017经典球星数据库
linux查看发行版本
台州市图书馆 网络
淘宝上门取件怎么付费
淘宝哪个店铺卖鞋好
苏州万户网络
阿里云os刷机包
域名查询工具
rimworld mac
上海程序员
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 下海经商 公务员经商 经商开店 经商技巧 如何经商 经商书籍 经商必读 怎样经商 农村经商 经商办企业 经商十句名言 读书不如经商驳论文 想经商学什么专业 经商之道的名言 经商之信的名言警句 如何经商做生意技巧 经商是什么意思 经商什么意思 经商之道必读之书 经商之道白手起家 如何经商之道 如何创业经商 如何做生意技巧 做买卖的窍门 生意经营之道经验心得 做生意的技巧及经验 卖东西的说话技巧 做生意的技巧 经营之道 小区做生意 怎样去做生意 做生意的经验 做生意选项目 怎么学习做生意 怎样自己做生意 云南做生意 上班族如何做生意 小本做生意 做生意好做吗 10万做生意 小本投资做生意

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里