jquery TAB切换小插件
//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切换小插件的更多相关文章
- jQuery动画切换引擎插件Velocity.js
Velocity.js 官网 Velocity.js实现弹出式相框 慕课网 极棒的jquery动画切换引擎插件Velocity.js jQ库 (function($){ // 普通调用 /*$('#d ...
- 10款好用的 jQuery 图片切换效果插件
jQuery 是一个非常优秀的 Javascript 框架,使用简单灵活,同时还有许多成熟的插件可供选择.其中,最令人印象深刻的应用之一就是对图片的处理,它可以让帮助你在你的项目中加入一些让人惊叹的效 ...
- 10 款基于 jQuery 的切换效果插件推荐
本文整理了 10 款非常好用的 jQuery 切换效果插件,包括平滑切换和重叠动画等,这些插件可以实现不同元素之间的动态切换. 1. InnerFade 这是一个基于 jQuery 的小插件,可以实现 ...
- jquery tab切换
首先引入jquery.js <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...
- jquery动画切换引擎插件 Velocity.js 学习01
一.Velocity.js介绍 Velocity是一个jQuery插件,重新实现了$.animate() 来产生更高的性能(速度也比CSS动画库更快),而包括新的功能,以提高动画工作流程. Veloc ...
- jquery动画切换引擎插件 Velocity.js 学习02
案例实践: 第一页会以动画形式进入页面: 点击进入按钮时,第一页以动画消失,第二页以动画形式进入,同时四张图片也定义从小到大的动画形式: 第二页关闭按钮点击时,先是四张图片以缩小动画消失,然后第二页以 ...
- jquery 添加关键字小插件
模块化封装,兼容seajs /** * User: c3t * Date: 14-3-25 * Time: 下午4:16 */ define(function (require, exports, m ...
- jquery 图片切换
仿着写的一个jquery的图片切换小插件,代码如下: html: <!DOCTYPE html> <html lang="en"> <head> ...
- 闲聊select和input常用的小插件
前言 在pc端的项目中,经常会用到表单标签,莫过于是select和input这两种,这两种相当常用.但往往原生的功能不尽人意,即使 input中type有n多属性,甚至连时间控件都有,但仍旧满足不了我 ...
随机推荐
- npm 安装与卸载模块
1. 只卸载模块 由于之前安装过,在 package.json 中的记录仍然存在 npm uninstall lodash 2. --save 参数使用 卸载模块的同时删除在 package.json ...
- POJ 2289 多重二分匹配+二分 模板
题意:在通讯录中有N个人,每个人能可能属于多个group,现要将这些人分组m组,设各组中的最大人数为max,求出该最小的最大值 下面用的是朴素的查找,核心代码find_path复杂度是VE的,不过据说 ...
- [模板][HDU]P2544[单源最短路][SPFA]
题目就不放了,主要是写一下SPFA,很少写,今天特别学了一个用STL的队列来做的. 代码: #include<iostream> #include<cstdio> #inclu ...
- linux下vsftpd的安装及配置使用详细步骤(推荐)
vsftpd 是“very secure FTP daemon”的缩写,安全性是它的一个最大的特点. vsftpd 是一个 UNIX 类操作系统上运行的服务器的名字,它可以运行在诸如 Linux.BS ...
- .net sqlite 内存溢出 问题的分析与解决。
一个小的工具网站,用了sqlite数据库,在并发小的情况一切正常,但是并发量上来之后,就报"out of memory"错误了. 分析了代码,就是很简单的根据一个条件取一段数据,并 ...
- ros the public key is not available
W: An error occurred during the signature verification. The repository is not updated and the previo ...
- eclipse经常卡死
修改eclipse.ini 将启动内存,最小内存,最大内存都增大 eclipse是内存不够再去申请,直到有最大内存的 若上述方法不行则换eclipse eclipse有的版本是不稳定的,我用Ke ...
- ES6中数组和对象的扩展运算符拷贝问题以及常用的深浅拷贝方法
在ES6中新增了扩展运算符可以对数组和对象进行操作.有时候会遇到数组和对象的拷贝,可能会用到扩展运算符.那么这个扩展运算符到底是深拷贝还是浅拷贝呢? 一..使用扩展运算符拷贝 首先是下面的代码. le ...
- [ScreenOS] How to manually generate a new system self-signed certificate to replace the expired system self-signed certificate without resetting the firewall
SUMMARY: This article provides information on how to manually generate a new system self-signed cert ...
- 初学node.js-nodejs中实现修改用户路由
经过前面几次的学习,已经可以做下小功能,今天要实现的是修改用户路由. 一.users_model.js 功能:定义用户对象模型 var mongoose=require('mongoose'), S ...