zoukankan      html  css  js  c++  java

  • 实现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，这个很奇怪。 
  • 相关阅读:
    【STM32H7教程】第35章 STM32H7的定时器应用之高精度单次延迟实现（支持TIM2,3,4和5）
    【重大更新】AppWizard来了，emWin6.10版本来了
    【STM32H7教程】第34章 STM32H7的定时器应用之TIM1-TIM17的PWM实现
    【STM32H7教程】第33章 STM32H7的定时器应用之TIM1-TIM17的中断实现
    【性能测评】DSP库，MDK5的AC5，AC6，IAR和Embedded Studio的三角函数性能
    【实战经验分享】一劳永逸的解决网线随意热插拔问题
    基于STM32的无损压缩算法miniLZO移植，压缩率很高，20KB随机数压缩到638字节，耗时275us
    Java Number & Math类
    Java switch case语句
    java条件语句
  • 原文地址：https://www.cnblogs.com/zhycyq/p/3488493.html
Copyright © 2011-2022 走看看