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多属性,甚至连时间控件都有,但仍旧满足不了我 ...
随机推荐
- Email 发送
namespace 99999 { /// <summary> /// Common interfaces to connect mail server to process e-mail ...
- Mybatis-Plus和Mybatis的区别
1.List item 区别一如果Mybatis Plus是扳手,那Mybatis Generator就是生产扳手的工厂.通俗来讲——MyBatis:一种操作数据库的框架,提供一种Mapper类,支持 ...
- struts2.3.20+spring4.0.2+hibernate4.3.4框架整合
一.创建web工程,搭建Struts框架开发环境: 这里只导入了项目中所需要的重要的jar包,以后根据业务要求继续导入相关的包. 步骤1::导入struts框架所需的jar包 步骤2:在web.xml ...
- [BZOJ2729]:[HNOI2012]排队(组合数学)
题目传送门 题目描述 某中学有n名男同学,m名女同学和两名老师要排队参加体检.他们排成一条直线,并且任意两名女同学不能相邻,两名老师也不能相邻,那么一共有多少种排法呢?(注意:任意两个人都是不同的) ...
- legend3---Laravel Homestead的安装和使用
legend3---Laravel Homestead的安装和使用 一.总结 一句话总结: 配置好homestead之后编码非常方便:在虚拟机或者外部机器里面操作代码两者都会同时改变. 1.Homes ...
- Oracle JET 单页面应用程序Router 使用(上)
单页面应用程序:使用一个进加载一次的网页,如果页面由于用户的交互而改变,则仅绘制更改的页面部分. 要创建单页面应用程序需要使用 oj.Router 的虚拟导航来支持,ojModule 用来响应页面的重 ...
- CAN诊断学习
汽车CAN总线有动力总成PCAN,底盘控制CCAN,整车控制BCAN,娱乐ECAN,诊断DCAN五种. CAN诊断,即是对CAN网络中各节点,各CAN总线,网关的故障进行检查与修复. 统一诊断服务(U ...
- 写入mongodb
https://blog.csdn.net/u013421629/article/details/78885079 https://www.jianshu.com/p/7d14c3ad810f 可视 ...
- 【linux】杀掉进程命令
1.找到对应的进程 通过端口查找 lsof -i:端口号 netstat -tunlp | grep 端口 lsof -i:9500 netstat -tunlp | grep 9500 2. ...
- Jmeter之保存响应到文件
在jmeter中使用保存响应到文件 ------适用于非GUI模式执行脚本时,无法查看报错的信息. 1.添加组件: 2.各个配置项说明: (1.名称:即组件在整个测试计划中的名称显示,建议设置为用意义 ...