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

 

页面中用到一个图片：

 

页面代码如下：

  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. ; 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. ; 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，这个很奇怪。

实现TabView(页签)效果的更多相关文章

  1. ASP.NET MVC搭建项目后台UI框架—4、tab多页签支持

    目录 ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NE ...

  2. WPF如何实现一个漂亮的页签导航UI

    最近看到一个比较漂亮的UI主界面,该UI是用左边的页签进行导航,比较有特色,就想着尝试用WPF来实现一下.经过一番尝试,基本上将UI设计图的效果用WPF程序进行了实现.下面介绍一下主要的思路: 1 U ...

  3. JavaScript选项卡/页签/Tab的实现

    选项卡,也称页签,英文用Tab(Module-Tabs)表示.Tab将不同的内容重叠放在一个布局块内,重叠的内容区里每次只有其中一个是可见的. Tab可以在相同的空间里展示更多的信息,它把相似的主题分 ...

  4. android123 zhihuibeijing 新闻中心-新闻 页签 ViewPagerIndicator实现

    ## ViewPagerIndicator ## 使用导入ViewPagerIndicator库的方式相当于可以改源码,打包编译Eclips可以自动完成. ViewPager指针项目,在使用ViewP ...

  5. Tab页签切换

    js之tab页签切换效果       现在web网站,很多地都需要用到tab页签. 示例:         $(document).ready(function(){               va ...

  6. Winfon 页签切换及窗体控件自适应

    由于公司的业务调整,最近不仅开发bs,还有不熟悉的cs,人手也不足,项目还多,对于cs来说,算是小白,虽然是一个人,也是硬着头皮写,拖拽控件,自定义控件.一个项目下来,对cs有了很深的认识,这里好好感 ...

  7. easyui tabs页签显示在底部属性

    data-options="tabPosition:'bottom'" 如果没有该属性  页签默认显示在最上面,效果如下 当加上了该属性  ,页签会出现在底部

  8. EBS OAF开发中怎样实现功能页签（Global Tab）

    EBS OAF开发中怎样实现功能页签(Global Tab) (版权声明.本人原创或者翻译的文章如需转载.如转载用于个人学习,请注明出处.否则请与本人联系,违者必究) 功能页签的实现不须要不论什么编码 ...

  9. Android实现图片滚动控件，含页签功能，让你的应用像淘宝一样炫起来

    首先题外话,今天早上起床的时候,手滑一下把我的手机甩了出去,结果陪伴我两年半的摩托罗拉里程碑一代就这么安息了,于是我今天决定怒更一记,纪念我死去的爱机. 如果你是网购达人,你的手机上一定少不了淘宝客户 ...

随机推荐

  1. celery与mangodb搭配应用

    写作背景介绍 在celery简单应用中已经介绍了如何去配置一个celery应用,也知道怎么分离任务逻辑代码与客户端代码了.我们现在的任务是怎么把计算结果保存到数据库中,这种数据持久化是非常重要的.你一 ...

  2. celery简单入门

    写作背景介绍 最近在做后台图像处理,需要使用到celery这个异步任务框架.但是使用的时候遇到很多技术问题,为了方便日后再遇到相似问题时能够快速解决.写下这篇文章也希望能够帮助共同奋战在同一战线的程序 ...

  3. C语言实现二叉树-04版

    二叉树,通常应当是研究其他一些复杂的数据结构的基础.因此,通常我们应该精通它,而不是了解:当然,可能并不是每个人都认同这种观点,甚至有些人认为理解数据结构就行了!根本没有必要去研究如何实现,因为大多数 ...

  4. paip.提升性能---协程“微线程”的使用.

    paip.提升性能---协程的使用. 近乎无限并发的"微线程" 作者Attilax  艾龙,  EMAIL:1466519819@qq.com 来源:attilax的专栏 地址:h ...

  5. Atitit.并发测试解决方案(2) -----获取随机数据库记录 随机抽取数据 随机排序 原理and实现

    Atitit.并发测试解决方案(2) -----获取随机数据库记录 随机抽取数据 随机排序 1. 应用场景 1 2. 随机抽取数据原理 1 3. 常用的实现方法:::数据库随机函数 1 4. Mssq ...

  6. JQ属性和css部分测试

    1.attr(name|properties|key,value|fn)  设置或返回被选元素的属性值. <div class="attr">设置或返回被选元素的属性值 ...

  7. echart.js的使用与API

    ---恢复内容开始--- echart.js的使用与API 1.echart.js的使用: 第一步:在head标签或body下创建一个script标签去引用echart.js,(该文件可以在echar ...

  8. DRAM 内存介绍(二)

    参考资料:http://www.anandtech.com/show/3851/everything-you-always-wanted-to-know-about-sdram-memory-but- ...

  9. java综合

    java环境变量配置:http://jingyan.baidu.com/article/f96699bb8b38e0894e3c1bef.html 1.导入项目 当下载了包含Eclipse 项目的源代 ...

  10. SQL获取本周销售总数

    select sum("NUMBER") as WEEK_NUMBER, COMPANY_CODE, PROJECT_CODE from D_VISIT WHERE "D ...