jquery tab插件精简版分享


Posted in Javascript onSeptember 10, 2011
/* 
* jqpressToos1.0 
* 
* Copyright (c) 2011 yepeng 
* Dual licensed under the MIT (MIT-LICENSE.txt) 
* and GPL (GPL-LICENSE.txt) licenses. 
* 
*/ $.fn.extend({ 
//插件名称:Tab选项卡 
jqpressTab: function(options) { 
//参数和默认值 
var defaults = { 
_tabClass: null,//选项卡样式 
_childs:null //子选项 样式选择器 
}; 
var options = $.extend(defaults, options); 
var o = options; 
var parentCate = $(this); 
var childCate = $(o._childs); 
parentCate.mouseover(function() { 
parentCate.removeClass(o._tabClass); 
$(this).addClass(o._tabClass); 
for (i = 0; i < parentCate.length; i++) { 
if (parentCate[i].className == o._tabClass) { 
childCate[i].style.display = "block"; 
} else { 
childCate[i].style.display = "none"; 
} 
} 
}); 
} 
}); 
})(jQuery);

调用方法更简单:

jQuery(document).ready(function(){ $(".mytab li a").jqpressTab({ _tabClass: "样式名称", _childs: "子元素样式名称" });});

如果需要根据ID做选择器自己扩展去吧,呵呵

Javascript 相关文章推荐
firefox中JS读取XML文件
Dec 21 Javascript
重构Javascript代码示例(重构前后对比)
Jan 23 Javascript
jquery实现表格奇数偶数行不同样式(有图为证及实现代码)
Jan 23 Javascript
jQuery使用fadeout实现元素渐隐效果的方法
Mar 27 Javascript
js实现使用鼠标拖拽切换图片的方法
May 04 Javascript
浅谈json取值(对象和数组)
Jun 24 Javascript
BootStrapValidator校验方式
Dec 19 Javascript
BootStrap Tooltip插件源码解析
Dec 27 Javascript
jQuery插件MovingBoxes实现左右滑动中间放大图片效果
Feb 28 Javascript
angular2 ng2 @input和@output理解及示例
Oct 10 Javascript
JS扩展String.prototype.format字符串拼接的功能
Mar 09 Javascript
node全局变量__dirname与__filename的区别
Jan 14 Javascript
javascript语言结构小记(一)
Sep 10 #Javascript
JavaScript高级程序设计 客户端存储学习笔记
Sep 10 #Javascript
JavaScript高级程序设计 错误处理与调试学习笔记
Sep 10 #Javascript
JavaScript高级程序设计 事件学习笔记
Sep 10 #Javascript
JavaScript高级程序设计 XML、Ajax 学习笔记
Sep 10 #Javascript
JavaScript高级程序设计 DOM学习笔记
Sep 10 #Javascript
jquery maxlength使用说明
Sep 09 #Javascript
You might like
WinXP + Apache +PHP5 + MySQL + phpMyAdmin安装全功略
2006/07/09 PHP
小偷PHP+Html+缓存
2006/12/20 PHP
Discuz板块横排显示图片的实现方法
2007/05/28 PHP
PHP魔术方法__GET、__SET使用实例
2014/11/25 PHP
ThinkPHP框架设计及扩展详解
2014/11/25 PHP
浅谈thinkphp的实例化模型
2015/01/04 PHP
两种php去除二维数组的重复项方法
2015/11/04 PHP
php中时间函数date及常用的时间计算
2017/05/12 PHP
php微信开发之音乐回复功能
2018/06/14 PHP
用于table内容排序
2006/07/21 Javascript
最常用的12种设计模式小结
2011/08/09 Javascript
Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结
2013/11/14 Javascript
JS动态调用方法名示例介绍
2013/12/18 Javascript
JsRender实用入门教程
2014/10/31 Javascript
javascript实现倒计时跳转页面
2016/01/17 Javascript
Jquery基础之事件操作详解
2016/06/14 Javascript
Node.js开启Https的实践详解
2016/10/25 Javascript
在Debian(Raspberry Pi)树莓派上安装NodeJS的教程详解
2017/09/19 NodeJs
vue组件父与子通信详解(一)
2017/11/07 Javascript
nodejs结合socket.io实现websocket通信功能的方法
2018/01/12 NodeJs
layer父页获取弹出层输入框里面的值方法
2019/09/02 Javascript
JS寄快递地址智能解析的实现代码
2020/07/16 Javascript
[01:34]2016国际邀请赛中国区预选赛IG战队教练采访
2016/06/27 DOTA
Python中的集合类型知识讲解
2015/08/19 Python
在macOS上搭建python环境的实现方法
2019/08/13 Python
python 单线程和异步协程工作方式解析
2019/09/28 Python
python实现根据文件格式分类
2019/10/31 Python
Python文件操作基础流程解析
2020/03/19 Python
pip安装提示Twisted错误问题(Python3.6.4安装Twisted错误)
2020/05/09 Python
解决pip安装的第三方包在PyCharm无法导入的问题
2020/10/15 Python
美国家具网站:Cymax
2016/09/17 全球购物
怎样写好自我评价呢?
2014/02/16 职场文书
学校少先队工作总结
2015/08/12 职场文书
2016大学生暑期社会实践心得体会
2016/01/14 职场文书
CSS3 制作的书本翻页特效
2021/04/13 HTML / CSS
js Proxy的原理详解
2021/05/25 Javascript