jQuery实现tab选项卡效果的方法_jquery
程序员文章站
2022-05-21 08:17:23
...
本文实例讲述了jQuery实现tab选项卡效果的方法。分享给大家供大家参考。具体如下:
var tabs = { init: function(){ var $tab_contents=$('.tab-contents'), $tab_nav=$('.tab-nav'); $tab_contents.find('.tab-content:not(:first)').hide(); $tab_nav.find('li:first').addClass('active'); $tab_nav.on('click', 'li a', function(e){ e.preventDefault(); var $this=$(this),activeTab=this.hash,parent=$this.parents('section'),$contents=$(parent,$tab_contents); $(parent,$tab_nav).find('li').removeClass('active'); $this.parent().addClass('active'); $contents.find('.tab-content').hide(); $contents.find(activeTab).fadeIn(250); }); } }; $(document).ready(tabs.init());
html部分如下:
希望本文所述对大家的jquery程序设计有所帮助。
上一篇: Oracle analyze table的使用总结
下一篇: 数据库导入导出实例
推荐阅读
-
jQuery插件HighCharts实现的2D堆条状图效果示例【附demo源码下载】
-
jQuery实现table隔行换色和鼠标经过变色的两种方法
-
页面刷新时记住滚动条的位置jquery代码实现方法
-
jQuery简单实现根据日期计算星期几的方法
-
jQuery实现根据身份证号获取生日、年龄、性别等信息的方法
-
jQuery插件FusionCharts实现的3D帕累托图效果示例【附demo源码】
-
jQuery实现获取h1-h6标题元素值的方法
-
jQuery插件FusionCharts实现的2D面积图效果示例【附demo源码下载】
-
jQuery实现遍历复选框的方法示例
-
使用简洁的jQuery方法实现隔行换色功能