//tab切换
;(function($, window, document, undefined) { $.fn.tab = function(options) { var defaults = { //默认参数
btn:'.tab_name',//点击按钮
active:'active',//按钮增加的class
content:'.tab_cont',//切换的主题
event:'click',//触发的事件
effect:'show',//效果
backFn:function(){}//回调函数 }; var settings = $.extend({}, defaults, options);
var _this=this,
btn=_this.find(settings.btn),
content=_this.find(settings.content),
active=settings.active,
index; content.hide();
content.eq(0).show();
btn.on(settings.event,function(){ index=$(this).index();
btn.eq(index).addClass(active).siblings().removeClass(active); if(settings.effect=='fade'){ content.eq(index).siblings(content).hide().end().fadeIn(settings.backFn); }else{ content.eq(index).siblings(content).hide().end().show(0,settings.backFn);
} }) }; })(jQuery, window, document);

页面有多个tab切换,写成插件会比较省事,调用:

$('.share_news').tab({});

jquery TAB切换小插件的更多相关文章

  1. jQuery动画切换引擎插件Velocity.js

    Velocity.js 官网 Velocity.js实现弹出式相框 慕课网 极棒的jquery动画切换引擎插件Velocity.js jQ库 (function($){ // 普通调用 /*$('#d ...

  2. 10款好用的 jQuery 图片切换效果插件

    jQuery 是一个非常优秀的 Javascript 框架,使用简单灵活,同时还有许多成熟的插件可供选择.其中,最令人印象深刻的应用之一就是对图片的处理,它可以让帮助你在你的项目中加入一些让人惊叹的效 ...

  3. 10 款基于 jQuery 的切换效果插件推荐

    本文整理了 10 款非常好用的 jQuery 切换效果插件,包括平滑切换和重叠动画等,这些插件可以实现不同元素之间的动态切换. 1. InnerFade 这是一个基于 jQuery 的小插件,可以实现 ...

  4. jquery tab切换

    首先引入jquery.js <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...

  5. jquery动画切换引擎插件 Velocity.js 学习01

    一.Velocity.js介绍 Velocity是一个jQuery插件,重新实现了$.animate() 来产生更高的性能(速度也比CSS动画库更快),而包括新的功能,以提高动画工作流程. Veloc ...

  6. jquery动画切换引擎插件 Velocity.js 学习02

    案例实践: 第一页会以动画形式进入页面: 点击进入按钮时,第一页以动画消失,第二页以动画形式进入,同时四张图片也定义从小到大的动画形式: 第二页关闭按钮点击时,先是四张图片以缩小动画消失,然后第二页以 ...

  7. jquery 添加关键字小插件

    模块化封装,兼容seajs /** * User: c3t * Date: 14-3-25 * Time: 下午4:16 */ define(function (require, exports, m ...

  8. jquery 图片切换

    仿着写的一个jquery的图片切换小插件,代码如下: html: <!DOCTYPE html> <html lang="en"> <head> ...

  9. 闲聊select和input常用的小插件

    前言 在pc端的项目中,经常会用到表单标签,莫过于是select和input这两种,这两种相当常用.但往往原生的功能不尽人意,即使 input中type有n多属性,甚至连时间控件都有,但仍旧满足不了我 ...

随机推荐

  1. linux操作目录命令之mkdir与rmdir

    一.mkdir  创建目录(一个或多个目录) mkdir -m 777 -p path 1)-m  对新建目录设置权限 2)-p  可以是一个路径名称.此时若路径的某一级目录尚不存在,使有该选项后系统 ...

  2. [转] Linux多线程编程之pthread

    转载出处:https://blog.csdn.net/skyroben/article/details/72793409 1.背景知识 Linux没有真正意义上的线程,它的实现是由进程来模拟,所以属于 ...

  3. BZOJ 4373: 算术天才⑨与等差数列 线段树

    Description 算术天才⑨非常喜欢和等差数列玩耍. 有一天,他给了你一个长度为n的序列,其中第i个数为a[i]. 他想考考你,每次他会给出询问l,r,k,问区间[l,r]内的数从小到大排序后能 ...

  4. TTTTTTTTTTTTTT POJ 3678 与或异或 2-SAT+强连通 模板题

    Katu Puzzle Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 9129 Accepted: 3391 Descripti ...

  5. 【Leetcode】最长回文子串

    启发 1)做题前一定要读懂题目 在本题中,首先要清楚地定义回文子串的概念,然后才能设计算法查找它. 如中心扩散法,其主要思想在于找到一个回文子串的定义——两侧互为镜像.进一步分为奇数长度和偶数长度进行 ...

  6. (转)python selenium-webdriver 元素操作之鼠标和键盘事件

    参考资料:https://blog.csdn.net/zh175578809/article/details/76767748 参考资料2:https://blog.csdn.net/qq_41817 ...

  7. css实现不定宽高的div水平、垂直居中

    一共有三个方案: 1,第一种方案主要使用了css3中transform进行元素偏移,效果非常好 这方法功能很强大,也比较灵活,不仅仅局限在实现居中显示.  兼容方面也一样拿IE来做比较,第二种方法IE ...

  8. NOIP2009靶形数独(暴搜)

    题目传送门 题目描述 小城和小华都是热爱数学的好学生,最近,他们不约而同地迷上了数独游戏,好胜的他们想用数独来一比高低.但普通的数独对他们来说都过于简单了,于是他们向Z博士请教,Z博士拿出了他最近发明 ...

  9. Base64工具类并发问题!

    为减少对象创建次数,一般会做如下编码: public class EncodeUtils { private static BASE64Encoder encoder; private static ...

  10. Unsupervised Image-to-Image Translation Networks

    Abstract: 无监督图像到图像的翻译目的是学习不同域图像的一个联合分布,通过使用来自单独域图像的边缘分布.给定一个边缘分布,可以得到很多种联合分布.如果不加入额外的假设条件的话,从边缘分布无法推 ...