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 字符串连接性能优化
Dec 20 Javascript
深入分析js中的constructor和prototype
Apr 07 Javascript
js将json格式内容转换成对象的方法
Nov 01 Javascript
JavaScript从数组的indexOf()深入之Object的Property机制
May 11 Javascript
用瀑布流的方式在网页上插入图片的简单实现方法
Sep 23 Javascript
Node.js的环境安装配置(使用nvm方式)
Oct 11 Javascript
javascript 玩转Date对象(实例讲解)
Jul 11 Javascript
在vue项目中使用Nprogress.js进度条的方法
Jan 31 Javascript
angular 实现的输入框数字千分位及保留几位小数点功能示例
Jun 19 Javascript
详解VUE单页应用骨架屏方案
Jan 17 Javascript
JS+CSS+HTML实现“代码雨”类似黑客帝国文字下落效果
Mar 17 Javascript
vue-以文件流-blob-的形式-下载-导出文件操作
Aug 07 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生成二维码的两个方法和实例
2014/07/01 PHP
php遍历树的常用方法汇总
2015/06/18 PHP
PHP批量删除jQuery操作
2017/07/23 PHP
基于jquery实现漂亮的动态信息提示效果
2011/08/02 Javascript
Javascript 函数parseInt()转换时出现bug问题
2014/05/20 Javascript
判断浏览器的内核及版本号方法汇总
2015/01/05 Javascript
jQuery遍历json中多个map的方法
2015/02/12 Javascript
node简单实现一个更改头像功能的示例
2017/12/29 Javascript
详解如何在React组件“外”使用父组件的Props
2018/01/12 Javascript
vue中的模态对话框组件实现过程
2018/05/01 Javascript
vue js秒转天数小时分钟秒的实例代码
2018/08/08 Javascript
谈谈IntersectionObserver懒加载的具体使用
2019/10/15 Javascript
vue swipeCell滑动单元格(仿微信)的实现示例
2020/09/14 Javascript
[00:57]辉夜杯战队访谈宣传片—VG
2015/12/25 DOTA
Python简单进程锁代码实例
2015/04/27 Python
Python爬取APP下载链接的实现方法
2016/09/30 Python
python执行使用shell命令方法分享
2017/11/08 Python
Python lambda函数基本用法实例分析
2018/03/16 Python
python发送告警邮件脚本
2018/09/17 Python
基于python框架Scrapy爬取自己的博客内容过程详解
2019/08/05 Python
Python3 使用selenium插件爬取苏宁商家联系电话
2019/12/23 Python
Macbook安装Python最新版本、GUI开发环境、图像处理、视频处理环境详解
2020/02/17 Python
如何在Python对Excel进行读取
2020/06/04 Python
Django filter动态过滤与排序实现过程解析
2020/11/26 Python
HTML5 画布canvas使用方法
2016/03/18 HTML / CSS
荷兰在线啤酒店:Beerwulf
2019/08/26 全球购物
销售自我评价
2013/10/22 职场文书
三年大学自我鉴定
2014/01/16 职场文书
外语系大学生自荐信范文
2014/03/01 职场文书
股东协议书范本
2014/04/14 职场文书
赵乐秦在党的群众路线教育实践活动总结大会上的讲话稿
2014/10/25 职场文书
先进单位申报材料
2014/12/25 职场文书
2015年保险公司工作总结
2015/04/24 职场文书
机关干部纪律作风整顿心得体会
2016/01/23 职场文书
原来实习报告是这样写的呀!
2019/07/03 职场文书
奖学金发言稿(范文)
2019/08/21 职场文书