基于jquery的9行js轻松实现tab控件示例
更新时间:2013年10月13日 07:27 点击:2604
代码如下:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script> <script type="text/javascript"> /** * 考虑到tab和pane有可能被动态的添加和删除, * 所以每次都废点时间去查找先前被激活的tab */ var tab = function(tabId,activeId){ $("#"+tabId).delegate("li:not(#"+activeId+")","click",function(){ $("#"+$("#"+activeId).attr("tar")).css("display","none"); $("#"+activeId).removeAttr("id"); $(this).attr("id",activeId); $("#"+$(this).attr("tar")).css("display","block"); }); }; </script> </head> <style> li{ border:1px solid #b5e2f3; border-bottom:0px; float:left; width:100px; height:25px; margin:0 7px; background:#F1FEF3; padding:9px 0 0 0; text-align:center; color:#33a3dc; cursor:pointer; } ul{ width:800; height:36px; border-bottom:1px solid #b5e2f3; } #selected{ background:#FFF!important; border-bottom:2px solid #FFF!important; } ul{margin:-1px;} #cate1,#cate2, #cate3, #cate4, #cate5{ clear:both; height:300px; background:#FFFFFF; width:800px; height:100px; padding:25px; border:1px solid #b5e2f3; } </style> <body> <div id="tab"> <ul> <li tar="cate1" id="selected">1</li> <li tar="cate2">2</li> <li tar="cate3">3</li> <li tar="cate4">4</li> </ul> </div> <div> <div id="cate1" style="display:block;"> 1 </div> <div id="cate2" style="display:none;"> 2 </div> <div id="cate3" style="display:none;"> 3 </div> <div id="cate4" style="display:none;"> 4 </div> </div> </body> <script> tab("tab","selected"); </script> </html>
相关文章
- php5.3或以上版本可以使用php管理crontab计划任务,下面我先来体验一下,有需要学习了解的朋友可进入参考。 1.使用php-crontab-manager管理计划任务 要求 PHP>=5.3...2016-11-25
- 这篇文章主要介绍了vant 解决tab切换插件标题样式自定义的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-14
- 这篇文章主要为大家详细介绍了jquery实现有过渡效果的tab切换,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-07-17
- 这篇文章主要为大家详细介绍了ionic实现可滑动的tab选项卡切换效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2016-09-01
- 这篇文章主要给大家介绍了关于C++解析特殊符号tab、换行符号的相关资料,这个功能在我们日常开发中经常会遇到,需要的朋友可以参考下...2021-05-16
- 这篇文章主要为大家详细介绍了小程序实现点击tab切换左右滑动,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-11-15
- 这篇文章主要介绍了C# 键盘Enter键取代Tab键实现代码,有需要的朋友可以参考一下...2020-06-25
- 这篇文章主要为大家详细介绍了js开发插件实现tab选项卡效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-09-18
- 这篇文章主要分步解析JavaScript实现tab选项卡自动切换功能代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2016-01-26
- js实现tab标签效果,在项目中经常用到,今天抽点时间把我写的js实现tab标签效果源码分享给大家,对js tab标签代码需要的朋友参考下...2016-01-14
- 这篇文章主要为大家介绍了javascript实现tab响应式切换特效,以一个完整的实例对tab响应式切换特效进行详细的分析,感兴趣的小伙伴们可以参考一下...2016-02-01
- 这篇文章主要介绍了crontab无法执行php的解决方法,较为详细了Linux平台使用crontab运行PHP的相关注意事项,需要的朋友可以参考下...2016-01-26
- 这篇文章主要为大家详细介绍了原生JS封装vue Tab切换效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-04-28
- 这篇文章主要为大家详细介绍了ionic组件ion-tabs选项卡切换效果实例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2016-09-01
- 这篇文章主要为大家详细介绍了微信小程序实现简单Tab切换效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-05-13
- 这篇文章给大家介绍了代码缩进用空格还是Tab?(IDEA中设置Tab健为4个空格)的相关知识,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧...2021-03-09
- 本文主要分享了几种tab切换的示例代码。具有很好的参考价值,下面跟着小编一起来看下吧...2017-02-08
值得分享的Bootstrap Ace模板实现菜单和Tab页效果
这篇文章主要为大家分享了基于Bootstrap Ace模板实现菜单和Tab页效果,感兴趣的小伙伴们可以参考一下...2016-01-02jquery实现tab选项卡切换效果(悬停、下方横线动画位移)
这篇文章主要介绍了jquery实现tab选项卡切换效果,实现悬停、下方横线动画位移,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2017-05-09Android自定义view仿QQ的Tab按钮动画效果(示例代码)
这篇文章主要介绍了Android自定义view仿QQ的Tab按钮动画效果(示例代码),本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考价值,需要的朋友可以参考下...2021-01-25