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 相关文章推荐
漂亮的仿flash菜单,来自蓝色经典
Jun 26 Javascript
javascript 实现父窗口引用弹出窗口的值的脚本
Aug 07 Javascript
js setTimeout opener的用法示例详解
Oct 23 Javascript
jQuery获得IE版本不准确webbrowser的解决方法
Feb 23 Javascript
jQuery中replaceWith()方法用法实例
Dec 25 Javascript
探讨JavaScript语句的执行过程
Jan 28 Javascript
JS中parseInt()和map()用法分析
Dec 16 Javascript
vue 挂载路由到头部导航的方法
Nov 13 Javascript
vue非父子组件通信问题及解决方法
Jun 11 Javascript
vue2.0$nextTick监听数据渲染完成之后的回调函数方法
Sep 11 Javascript
深入探讨JavaScript的最基本部分之执行上下文
Feb 12 Javascript
vue-cli3跨域配置的简单方法
Sep 06 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
基于PHP实现的事件机制实例分析
2015/06/18 PHP
php intval函数用法总结
2019/04/14 PHP
PHP实现带进度条的Ajax文件上传功能示例
2019/07/02 PHP
jQuery UI AutoComplete 自动完成使用小记
2010/08/21 Javascript
JS数学函数Exp使用说明
2012/08/09 Javascript
一个简单的JS时间控件示例代码(JS时分秒时间控件)
2013/11/22 Javascript
jQuery函数的第二个参数获取指定上下文中的DOM元素
2014/05/19 Javascript
jquery实现网站列表切换效果的2种方法
2016/08/12 Javascript
使用vue.js实现联动效果的示例代码
2017/01/10 Javascript
angular2系列之路由转场动画的示例代码
2017/11/09 Javascript
javaScript日期工具类DateUtils详解
2017/12/08 Javascript
vue使用el-upload上传文件及Feign服务间传递文件的方法
2019/03/15 Javascript
微信小程序学习笔记之文件上传、下载操作图文详解
2019/03/29 Javascript
微信小程序实现多选框全选与取消全选功能示例
2019/05/14 Javascript
JavaScript实现英语单词题库
2019/12/24 Javascript
[01:08:48]LGD vs OG 2018国际邀请赛淘汰赛BO3 第三场 8.25
2018/08/29 DOTA
Python isinstance判断对象类型
2008/09/06 Python
Python自定义类的数组排序实现代码
2016/08/28 Python
详解Django中间件的5种自定义方法
2018/07/26 Python
Python 使用PyQt5 完成选择文件或目录的对话框方法
2019/06/27 Python
基于Python的微信机器人开发 微信登录和获取好友列表实现解析
2019/08/21 Python
python将数组n等分的实例
2019/12/02 Python
pandas-resample按时间聚合实例
2019/12/27 Python
Python面向对象程序设计之私有变量,私有方法原理与用法分析
2020/03/23 Python
django使用F方法更新一个对象多个对象字段的实现
2020/03/28 Python
使用ITK-SNAP进行抠图操作并保存mask的实例
2020/07/01 Python
详解pyqt5的UI中嵌入matplotlib图形并实时刷新(挖坑和填坑)
2020/08/07 Python
美国最大的珠宝首饰网上商城:Jewelry.com
2016/07/22 全球购物
Trench London官方网站:高级风衣和意大利皮夹克
2020/07/11 全球购物
合伙经营协议书范本
2014/04/18 职场文书
2014年体育工作总结
2014/11/24 职场文书
2015年个人实习工作总结
2014/12/12 职场文书
实习生辞职信范文
2015/03/02 职场文书
党员违纪检讨书
2015/05/05 职场文书
新员工实习期个人工作总结
2015/10/15 职场文书
详解Laravel制作API接口
2021/05/31 PHP