//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. Static使用

    1.什么是static? static 是C++中很常用的修饰符,它被用来控制变量的存储方式和可见性. 其余控制变量存储方式的关键字为auto.register.extern. 2.为什么要引入sta ...

  2. Codeforces Round #303 (Div. 2) E. Paths and Trees Dijkstra堆优化+贪心(!!!)

    E. Paths and Trees time limit per test 3 seconds memory limit per test 256 megabytes input standard ...

  3. EcShop开发手册

    Ecshop文件结构 ecshop文件架构说明 ECShop 结构图及各文件相应功能介绍 ECShop upload 的目录 ┣ activity.php 活动列表 ┣ affiche.php 广告处 ...

  4. BZOJ 2281 Luogu P2490 [SDOI2011]黑白棋 (博弈论、DP计数)

    怎么SDOI2011和SDOI2019的两道题这么像啊..(虽然并不完全一样) 题目链接: (bzoj) https://www.lydsy.com/JudgeOnline/problem.php?i ...

  5. es之零停机重新索引数据

    实际生产,对于文档的操作,偶尔会遇到这种问题: 某一个字段的类型不符合后期的业务了,但是当前的索引已经创建了,我们知道es在字段的mapping建立后就不可再次修改mapping的值 比如: 1): ...

  6. [CSP-S模拟测试]:表达式密码(模拟)

    题目传送门(内部题87) 输入格式 从文件$expression.in$中读入数据.输入一行,一个字符串$S$,表示原表达式,保证为合法表达式 输出格式 输出到文件$expression.out$中. ...

  7. js的浅拷贝和深拷贝和应用场景

    为什么会用到浅拷贝和深拷贝 首先来看一下如下代码 let a = b = 2 a = 3 console.log(a) console.log(b) let c = d = [1,2,3] let e ...

  8. idea使用 git 撤销commit 原

    填写commit的id  就可以取消这一次的commit

  9. 为什么电脑连接不上FTP

    我们对服务器的FTP状况有实时监控,一般问题都不在服务器端. 而且我们客服一般会第一时间测试下您空间FTP是否真的不能连接 99%绝大部分FTP连接不上的问题,都是客户那边的软件端或网络问题. 问题分 ...

  10. 1、安装Scrapy

    一.网址:https://doc.scrapy.org/en/latest/intro/install.html 二.安装过程中出现"cl.exe"找不到的错误,解决方法:http ...