• 实现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.     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-0 2px 2px 2px;  
    56.     height:302px;  
    57.     overflow:hidden;  
    58. }  
    59. ul.tabpage li{  
    60.     height:300px;  
    61.     border-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的解释为" "，然后才是ul，这个很奇怪。 
  • 相关阅读:
    mysql常用语法
    Java虚拟机（JVM）内存区域
    Java基础之this和super关键字用法
    Java基础之instanceof和transient关键字用法
    排序算法之快速排序
    Java基础之final和abstract关键字
    排序算法之归并排序
    Java基础之static关键字的用法
    剑指offer题目系列三（链表相关题目）
    数据结构之栈和队列及其Java实现
  • 原文地址：https://www.cnblogs.com/zhycyq/p/3488493.html
Copyright © 2020-2023  润新知