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 相关文章推荐
document.createElement()用法及注意事项(ff下不兼容)
Mar 13 Javascript
jquery正则表达式验证(手机号、身份证号、中文名称)
Dec 31 Javascript
JS判断是否手机或pad访问实现方法
Dec 09 Javascript
基于jQuery实现滚动刷新效果
Jan 09 Javascript
微信小程序 出现47001 data format error原因解决办法
Mar 10 Javascript
基于jquery trigger函数无法触发a标签的两种解决方法
Jan 06 jQuery
JavaScript中Object基础内部方法图
Feb 05 Javascript
javascript(基于jQuery)实现鼠标获取选中的文字示例【测试可用】
Oct 26 jQuery
layui清除radio的选中状态实例
Nov 14 Javascript
JS严格模式原理与用法实例分析
Apr 27 Javascript
vue引入静态js文件的方法
Jun 20 Javascript
详解React 元素渲染
Jul 07 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 线程安全与非线程安全版本的区别深入解析
2013/08/06 PHP
php获取目录所有文件并将结果保存到数组(实例)
2013/10/25 PHP
php获取数组长度的方法(有实例)
2013/10/27 PHP
PHP封装的多文件上传类实例与用法详解
2017/02/07 PHP
利用ajax和PHP实现简单的流程管理
2017/03/23 PHP
Thinkphp 在api开发中异常返回依然是html的解决方式
2019/10/16 PHP
jquery 取子节点及当前节点属性值的方法
2014/08/24 Javascript
Jquery实现兼容各大浏览器的Enter回车切换输入焦点的方法
2014/09/01 Javascript
JavaScript获取元素尺寸和大小操作总结
2015/02/27 Javascript
jQuery插件PageSlide实现左右侧栏导航菜单
2015/04/12 Javascript
js仿QQ中对联系人向左滑动、滑出删除按钮的操作
2016/04/07 Javascript
jQuery Easyui datagrid/treegrid 清空数据
2016/07/09 Javascript
对比分析Django的Q查询及AngularJS的Datatables分页插件
2017/02/07 Javascript
jQuery Mobile漏洞会有跨站脚本攻击风险
2017/02/12 Javascript
nodejs集成sqlite使用示例
2017/06/05 NodeJs
基于javascript处理nginx请求过程详解
2020/07/07 Javascript
Python学习资料
2007/02/08 Python
Python实现动态图解析、合成与倒放
2018/01/18 Python
基于Pandas读取csv文件Error的总结
2018/06/15 Python
linux下安装python3和对应的pip环境教程详解
2019/07/01 Python
python集成开发环境配置(pycharm)
2020/02/14 Python
Python dict和defaultdict使用实例解析
2020/03/12 Python
python软件测试Jmeter性能测试JDBC Request(结合数据库)的使用详解
2021/01/26 Python
俄罗斯化妆品和香水网上商店:Iledebeaute
2019/01/03 全球购物
写自荐信的七个技巧
2013/10/15 职场文书
动漫专业高职生职业生涯规划书
2014/02/15 职场文书
细节决定成败演讲稿
2014/05/12 职场文书
大学生简历求职信
2014/06/24 职场文书
村委会贫困证明范文
2014/09/21 职场文书
合同和协议有什么区别?
2014/10/08 职场文书
2015年挂职锻炼工作总结
2014/12/12 职场文书
万能检讨书开头与结尾怎么写
2015/02/17 职场文书
保护环境的宣传语
2015/07/13 职场文书
导游词之江西赣州
2019/10/15 职场文书
Python标准库pathlib操作目录和文件
2021/11/20 Python