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 相关文章推荐
js实现网站首页图片滚动显示
Feb 04 Javascript
显示今天的日期js代码(阳历和农历)
Sep 30 Javascript
JavaScript 作用域链解析
Nov 13 Javascript
jQuery中data()方法用法实例
Dec 27 Javascript
js实现格式化金额,字符,时间的方法
Feb 26 Javascript
jQuery事件绑定与解除绑定实现方法
Apr 15 Javascript
浅谈jQuery构造函数分析
May 11 Javascript
Javascript的表单验证-揭开正则表达式的面纱
Mar 18 Javascript
jQuery实现简单倒计时功能的方法
Jul 04 Javascript
ES6中异步对象Promise用法详解
Jul 31 Javascript
JS实现灯泡开关特效
Mar 30 Javascript
threejs太阳光与阴影效果实例代码
Apr 05 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
提升PHP执行速度全攻略(上)
2006/10/09 PHP
php数组函数序列之array_combine() - 数组合并函数使用说明
2011/10/29 PHP
php获取文件后缀的9种方法
2016/03/22 PHP
php结合ajax实现手机发红包的案例
2016/10/13 PHP
JavaScript中也使用$美元符号来代替document.getElementById
2010/06/19 Javascript
jQuery Clone Bug解决代码
2010/12/22 Javascript
Jquery中给animation加更多的运作效果实例
2013/09/05 Javascript
js实现同一个页面多个渐变效果的方法
2015/04/10 Javascript
jquery实现简单的无缝滚动
2015/04/15 Javascript
Bootstrap学习笔记之css样式设计(2)
2016/06/07 Javascript
js如何判断是否在iframe中及防止网页被别站用iframe嵌套
2017/01/11 Javascript
Vue+axios实现统一接口管理的方法
2018/07/23 Javascript
微信小程序登录按钮遮罩浮层效果的实现方法
2018/12/16 Javascript
微信小程序scroll-view隐藏滚动条的方法详解
2020/03/25 Javascript
VSCode写vue项目一键生成.vue模版,修改定义其他模板的方法
2020/04/17 Javascript
[44:04]OG vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
[01:07:13]TNC vs Pain 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
Python实用日期时间处理方法汇总
2015/05/09 Python
Django Highcharts制作图表
2016/08/27 Python
python中os模块详解
2016/10/14 Python
python3 判断列表是一个空列表的方法
2018/05/04 Python
pytorch 使用单个GPU与多个GPU进行训练与测试的方法
2019/08/19 Python
Python版中国省市经纬度
2020/02/11 Python
pytorch实现MNIST手写体识别
2020/02/14 Python
Stuart Weitzman美国官网:美国奢华鞋履品牌
2016/08/18 全球购物
豆腐の盛田屋官网:日本自然派的豆乳面膜、肥皂、化妆水、乳液等
2016/10/08 全球购物
美国知名眼镜网站:Target Optical
2020/04/04 全球购物
如何利用find命令查找文件
2016/11/18 面试题
《争吵》教学反思
2014/02/15 职场文书
模具设计与制造专业推荐信
2014/02/16 职场文书
2014年五四青年节演讲稿范文
2014/04/22 职场文书
加强作风建设工作总结
2014/10/23 职场文书
计生个人工作总结
2015/02/28 职场文书
九年级化学教学反思
2016/02/22 职场文书
你会写请假条吗?
2019/06/26 职场文书
goland 清除所有的默认设置操作
2021/04/28 Golang