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 相关文章推荐
javascript 函数参数限制说明
Nov 19 Javascript
JavaScript中的几个关键概念的理解-原型链的构建
May 12 Javascript
javascript一元操作符(递增、递减)使用示例
Aug 07 Javascript
input禁止键盘及中文输入,但可以点击
Feb 13 Javascript
JavaScript中的document.referrer在各种浏览器测试结果
Jul 18 Javascript
js与jquery回车提交的方法
Feb 03 Javascript
基于JS分页控件实现简单美观仿淘宝分页按钮效果
Nov 07 Javascript
详解Js模板引擎(TrimPath)
Nov 22 Javascript
javascript设计模式之单体模式学习笔记
Feb 15 Javascript
ES6新特性四:变量的解构赋值实例
Apr 21 Javascript
利用Jasmine对Angular进行单元测试的方法详解
Jun 12 Javascript
webpack打包js的方法
Mar 12 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
解析argc argv在php中的应用
2013/06/24 PHP
getimagesize获取图片尺寸实例
2014/11/15 PHP
CodeIgniter针对lighttpd服务器URL重写的方法
2015/06/10 PHP
在PHP程序中使用Rust扩展的方法
2015/07/03 PHP
laravel框架查询数据集转为数组的两种方法
2019/10/10 PHP
DOM_window对象属性之--clipboardData对象操作代码
2011/02/03 Javascript
javascript jscroll模拟html元素滚动条
2012/12/18 Javascript
asp.net中System.Timers.Timer的使用方法
2013/03/20 Javascript
通过$(this)使用jQuery包装后的方法或属性
2014/05/18 Javascript
jQuery动画与特效详解
2015/02/01 Javascript
JS创建事件的三种方法(实例代码)
2016/05/12 Javascript
Angular的Bootstrap(引导)和Compiler(编译)机制
2016/06/20 Javascript
利用ES6语法重构React组件详解
2017/03/02 Javascript
vue指令以及dom操作详解
2017/03/04 Javascript
AjaxUpLoad.js实现文件上传
2018/03/05 Javascript
JavaScript 格式化数字、金额、千分位、保留几位小数、舍入舍去
2019/07/23 Javascript
layui关闭层级、简单监听的实例
2019/09/06 Javascript
vue element自定义表单验证请求后端接口验证
2019/12/11 Javascript
JavaScript实现电灯开关小案例
2020/03/30 Javascript
Vue.js使用axios动态获取response里的data数据操作
2020/09/08 Javascript
[03:56]还原FTP电影首映式 DOTA2群星拼出遗迹世界
2014/03/26 DOTA
[01:12]快闪回顾DOTA2亚洲邀请赛(DAC) 静候2018新征程开启
2018/03/11 DOTA
[56:58]VP vs Optic 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python语言使用技巧分享
2016/05/31 Python
Python获取暗黑破坏神3战网前1000命位玩家的英雄技能统计
2016/07/04 Python
python使用Matplotlib画饼图
2018/09/25 Python
PyQtGraph在pyqt中的应用及安装过程
2019/08/04 Python
Python3显示当前时间、计算时间差及时间加减法示例代码
2019/09/07 Python
Python使用qrcode二维码库生成二维码方法详解
2020/02/17 Python
pytorch 使用加载训练好的模型做inference
2020/02/20 Python
使用html5实现表格实现标题合并的实例代码
2019/05/13 HTML / CSS
戴尔美国官网:Dell
2016/08/31 全球购物
网站创业计划书
2014/04/30 职场文书
小学优秀教育工作者事迹材料
2014/05/09 职场文书
个人买房协议书范本
2014/10/06 职场文书
庆六一开幕词
2015/01/29 职场文书