实现TabView(页签)效果

今天花了点时间，设计了一个网页上用的tabview(页签、tabcontrol)效果。个人觉得实现得比较不错，网页元素用得比较少，js代码也比较精练。测试了一下支持IE、FireFox以及chrome。支持同一页面上多处使用。 
　　没有什么过多说的。先看一下效果。 


 


页面中用到一个图片： 


 



页面代码如下： 

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><title>tabview示例(欢迎访问我的博客：http://wallimn.iteye.com)</title>  
  4. <meta http-equiv=content-type content="text/html; charset=GBK">  
  5. <script type="text/javascript">  
  6. function tabclick(obj){  
  7.     if(obj.className=='cur')return;  
  8.     var idx;  
  9.     for(var n=0; n<obj.parentNode.childNodes.length; n++){  
  10.         obj.parentNode.childNodes[n].className="";  
  11.         if(obj==obj.parentNode.childNodes[n])idx=n;  
  12.     }  
  13.     obj.className="cur";  
  14.     var pc = obj.parentNode.nextSibling;  
  15.     while(pc.nodeType==3)pcpc=pc.nextSibling;  
  16.     for(var n=0; n<pc.childNodes.length; n++){  
  17.         pc.childNodes[n].className="hdn";  
  18.     }  
  19.     pc.childNodes[idx].className="";  
  20. }  
  21. </script>  
  22. <style type="text/css">  
  23. .debug{  
  24.     border:1px solid red;  
  25. }  
  26. .hdn{  
  27.     display:none;  
  28. }  
  29. ul.tabbar,ul.tabpage{  
  30.     list-style-type:none;  
  31.     margin:0;  
  32.     font-size:12px;  
  33.     padding:0;  
  34. }  
  35. ul.tabbar{  
  36.     background:url(tabview.gif) repeat-x 0 -68px;  
  37.     height:34px;  
  38. }  
  39. ul.tabbar li{  
  40.     float:left;  
  41.     width:83px;  
  42.     height:34px;  
  43.     line-height:34px;  
  44.     text-align:center;  
  45.     background:url(tabview.gif);  
  46.     cursor:pointer;  
  47.     cursor:hand;  
  48. }  
  49. ul.tabbar li.cur{  
  50.     background:url(tabview.gif) 0 -34px;  
  51. }  
  52. ul.tabpage{  
  53.     border-style:ridge;  
  54.     border-color:#dceefd;   
  55.     border-width:0 2px 2px 2px;  
  56.     height:302px;  
  57.     overflow:hidden;  
  58. }  
  59. ul.tabpage li{  
  60.     height:300px;  
  61.     border-width:0;  
  62.     overflow-y:auto;  
  63. }  
  64. </style>  
  65. </head>  
  66. <body>  
  67. <ul class="tabbar">  
  68.     <li style="margin-left:1em" class="cur" onclick="tabclick(this)">过滤条件</li>  
  69.     <li onclick="tabclick(this)">排序条件</li>  
  70.     <li onclick="tabclick(this)">分　　组</li>  
  71.     <li onclick="tabclick(this)">计算字段</li>  
  72. </ul>  
  73. <ul class="tabpage">  
  74.     <li>显示过滤条件</li>  
  75.     <li class="hdn">显示排序条件</li>  
  76.     <li class="hdn">显示分　　组</li>  
  77.     <li class="hdn">显示计算字段</li>  
  78. </ul>  
  79. </body>  
  80. </html>  

转：http://wallimn.iteye.com/blog/353867

03-25进一步简化了代码，仅使用一个js函数； 
03-27修正了FF及Chrome浏览器中，对于nextSibling的解释为"\n"，然后才是ul，这个很奇怪。 

posted @ 2013-12-24 09:29  山清石玉  阅读(2933)  评论(0)  编辑  收藏  举报