jQuery实现tab选项卡效果的方法


Posted in Javascript onJuly 08, 2015

本文实例讲述了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部分如下:

<section>
 <h2>Section Title</h2>
 <ul class="tab-nav">
  <li><a href="#tab1" title="">Tab 1</a></li>
  <li><a href="#tab2" title="">Tab 2</a></li>
 </ul>
 <div class="tab-contents">
  <div id="tab1" class="tab-content"><!-- Tab 1 content here --></div>
  <div id="tab2" class="tab-content"><!-- Tab 2 content here --></div>
 </div>
</section>

希望本文所述对大家的jquery程序设计有所帮助。

Javascript 相关文章推荐
超级简单的图片防盗(HTML),好用
Apr 08 Javascript
jQuery的deferred对象使用详解
Aug 20 Javascript
js Array操作的最简短最容易理解方法
Dec 09 Javascript
三种动态加载js的jquery实例代码另附去除js方法
Apr 30 Javascript
JS JQUERY实现滚动条自动滚到底的方法
Jan 09 Javascript
angularjs学习笔记之三大模块(modal,controller,view)
Sep 26 Javascript
jQuery实现移动端手机商城购物车功能
Sep 24 Javascript
JavaScript实现邮箱地址自动匹配功能代码
Nov 28 Javascript
JavaScript给每一个li节点绑定点击事件的实现方法
Dec 01 Javascript
Vue源码学习之初始化模块init.js解析
Nov 02 Javascript
Vue中的混入的使用(vue mixins)
Jun 01 Javascript
通过vue手动封装on、emit、off的代码详解
May 29 Javascript
jQuery实现类似淘宝网图片放大效果的方法
Jul 08 #Javascript
javascript实现10个球随机运动、碰撞实例详解
Jul 08 #Javascript
详细分析JavaScript变量类型
Jul 08 #Javascript
js实现图片点击左右轮播
Jul 08 #Javascript
javascript获取重复次数最多的字符
Jul 08 #Javascript
javascript连续赋值问题
Jul 08 #Javascript
JavaScript中函数(Function)的apply与call理解
Jul 08 #Javascript
You might like
玩家交还《星际争霸》原始码光盘 暴雪报以厚礼
2017/05/05 星际争霸
php中修改浏览器的User-Agent来伪装你的浏览器和操作系统
2011/07/29 PHP
php中{}大括号是什么意思
2013/12/01 PHP
PHP把网页保存为word文件的三种方法
2014/04/01 PHP
php抽象类使用要点与注意事项分析
2015/02/09 PHP
PHP mysql事务问题实例分析
2016/01/18 PHP
php利用header函数下载各种文件
2016/08/24 PHP
一款Jquery 分页插件的改造方法(服务器端分页)
2011/07/11 Javascript
Javascript 函数parseInt()转换时出现bug问题
2014/05/20 Javascript
判断横屏竖屏(三种)
2017/02/13 Javascript
20行JS代码实现网页刮刮乐效果
2017/06/23 Javascript
微信小程序 按钮滑动的实现方法
2017/09/27 Javascript
详解基于Vue+Koa的pm2配置
2017/10/24 Javascript
详解vue使用vue-layer-mobile组件实现toast,loading效果
2018/08/31 Javascript
koa-router源码学习小结
2018/09/07 Javascript
node.js实现为PDF添加水印的示例代码
2018/12/05 Javascript
学习node.js 断言的使用详解
2019/03/18 Javascript
JavaScript arguments.callee作用及替换方案详解
2020/09/02 Javascript
[55:45]DOTA2上海特级锦标赛D组败者赛 Liquid VS COL第一局
2016/02/28 DOTA
python微信公众号之关注公众号自动回复
2018/10/25 Python
python ipset管理 增删白名单的方法
2019/01/14 Python
Python获取Redis所有Key以及内容的方法
2019/02/19 Python
python使用adbapi实现MySQL数据库的异步存储
2019/03/19 Python
Python3安装Pillow与PIL的方法
2019/04/03 Python
解析PyCharm Python运行权限问题
2020/01/08 Python
Python实现企业微信机器人每天定时发消息实例
2020/02/25 Python
浅谈Python中的模块
2020/06/10 Python
广州地球村科技数据库题目
2016/04/25 面试题
初中英语教学反思
2014/01/25 职场文书
《夏夜多美》教学反思
2014/02/17 职场文书
和谐社区口号
2014/06/19 职场文书
《我爱祖国》演讲稿1000字
2014/09/26 职场文书
工作检讨书500字
2014/10/19 职场文书
质量保证书
2015/01/17 职场文书
python如何获取网络数据
2021/04/11 Python
TS 类型收窄教程示例详解
2022/09/23 Javascript