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 相关文章推荐
JQuery优缺点分析说明
Apr 10 Javascript
DOM和XMLHttpRequest对象的属性和方法整理
Jan 04 Javascript
JS中setInterval、setTimeout不能传递带参数的函数的解决方案
Apr 28 Javascript
Javascript WebSocket使用实例介绍(简明入门教程)
Apr 16 Javascript
node.js学习总结之调式代码的方法
Jun 25 Javascript
jQuery获取radio选中项的值实例
Jun 18 Javascript
JavaScript表单焦点自动切换代码
Jul 24 Javascript
关于Iframe父页面与子页面之间的相互调用
Nov 22 Javascript
JavaScript中在光标处插入添加文本标签节点的详细方法
Mar 22 Javascript
浅谈mint-ui loadmore组件注意的问题
Nov 08 Javascript
解决使用bootstrap的dropdown部件时报错:error:Bootstrap dropdown require Popper.js问题
Aug 30 Javascript
在Vue项目中使用Typescript的实现
Dec 19 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命令行(cli)下执行PHP脚本文件的相对路径的问题解决方法
2015/05/25 PHP
Yii2增加验证码步骤详解
2016/04/25 PHP
PHP pear安装配置教程
2016/05/14 PHP
PHP多进程通信-消息队列使用
2019/03/08 PHP
使用laravel和ECharts实现折线图效果的例子
2019/10/09 PHP
JSON 编辑器实现代码
2009/12/06 Javascript
js中onload与onunload的使用示例
2013/08/25 Javascript
JQuery实现鼠标滑过显示导航下拉列表
2013/09/12 Javascript
完美兼容各大浏览器的jQuery插件实现图片切换特效
2014/12/12 Javascript
微信小程序 教程之WXSS
2016/10/18 Javascript
jQuery UI插件实现百度提词器效果
2016/11/21 Javascript
javascript基于牛顿迭代法实现求浮点数的平方根【递归原理】
2017/09/28 Javascript
Vue+mui实现图片的本地缓存示例代码
2018/05/24 Javascript
vue工程全局设置ajax的等待动效的方法
2019/02/22 Javascript
javascript的惯性运动实现代码实例
2019/09/07 Javascript
[56:00]2018DOTA2亚洲邀请赛 4.6 淘汰赛 VP vs TNC 第二场
2018/04/10 DOTA
[01:39:42]Fnatic vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
Python对两个有序列表进行合并和排序的例子
2014/06/13 Python
python通过pil模块将raw图片转换成png图片的方法
2015/03/16 Python
Python之父谈Python的未来形式
2016/07/01 Python
Python3调用微信企业号API发送文本消息代码示例
2017/11/10 Python
Python下利用BeautifulSoup解析HTML的实现
2020/01/17 Python
基于matplotlib xticks用法详解
2020/04/16 Python
Python configparser模块常用方法解析
2020/05/22 Python
css3实现的多级渐变下拉菜单导航效果代码
2015/08/31 HTML / CSS
俄罗斯卫浴采暖及维修用品超级市场:Dkrussia
2020/05/12 全球购物
客户经理岗位职责
2013/12/08 职场文书
计算机专业职业规划
2014/02/28 职场文书
一年级学生期末评语
2014/04/21 职场文书
财务会计专业自荐书
2014/06/30 职场文书
项目转让协议书
2014/10/27 职场文书
财务会计岗位职责
2015/02/03 职场文书
2016大学自主招生推荐信范文
2015/03/23 职场文书
Mysql 性能监控及调优
2021/04/06 MySQL
使用pytorch实现线性回归
2021/04/11 Python
Java 在生活中的 10 大应用
2021/11/02 Java/Android