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多属性,甚至连时间控件都有,但仍旧满足不了我 ...
随机推荐
- mysql LAST()函数 语法
mysql LAST()函数 语法 作用:返回指定的字段中最后一个记录的值. 语法:SELECT LAST(column_name) FROM table_name 注释:可使用 ORDER BY 语 ...
- 7.28Assignment
1.考试题(7.27) + 2.插头dp 4道题 0/4 before 18:00 3.cdq分治 2道题理解 0/2 before 21:00 4.点分治 2道题 0/2 before 7:00 ...
- R-CNN常见问题
可以不进行特定样本下的微调吗?可以直接采用AlexNet CNN网络的特征进行SVM训练吗? 不针对特定任务进行微调,而将CNN当成特征提取器,pool5层得到的特征是基础特征,类似于HOG.SIFT ...
- 【CF1243D&CF920E】0-1 MST(bfs,set)
题意:给定一张n个点的完全图,其中有m条边权为1其余为0,求最小生成树的权值和 n,m<=1e5 思路:答案即为边权为0的边连接的联通块个数-1 用set存图和一个未被选取的点的集合,bfs过程 ...
- B. Array K-Coloring
B. Array K-Coloring 给定一个数组 要求对元素进行染色,满足相同元素颜色一定不同,且所有颜色要全部用完 #include<bits/stdc++.h> using nam ...
- [UPC10525]:Dove打扑克(暴力+模拟)
题目描述 $Dove$和$Cicada$是好朋友,他们经常在一起打扑克来消遣时光,但是他们打的扑克有不同的玩法. 最开始时,牌桌上会有$n$个牌堆,每个牌堆有且仅有一张牌,第$i$个牌堆里里里那个扑克 ...
- linux系统下自动删除前N天的日志文件
删除文件命令: find 对应目录 -mtime +天数 -name "文件名" -exec rm -rf {} \; 实例命令: find /opt/soft/log/ -mti ...
- JS关于this指向的小练习
请阅读以下代码:var obj = {};obj.log = console.log;obj.log.call(console, this)该代码在浏览器中执行,输出的日志结果是什么? 这道题就是问c ...
- oauth2.0协议原理
OAuth的授权不会使用第三方触及到用户的帐号信息(如用户密码),即第三方无需使用用户的用户名与密码就可以申请获得该用户资源的授权,因此OAuth是安全的. OAuth的作用:就是让“客户端”安全可控 ...
- Jquery Ajax调用asmx出错问题
1.//若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务,请取消对下行的注释. [System.Web.Script.Services.ScriptService] 这个 ...