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 相关文章推荐
JS通过相同的name进行表格求和代码
Aug 18 Javascript
javascript字符串与数组转换汇总
May 26 Javascript
BootStrap中Datepicker控件带中文的js文件
Aug 10 Javascript
jQuery双向列表选择器DIV模拟版
Nov 01 Javascript
js返回顶部实例分享
Dec 21 Javascript
bootstrap fileinput 上传插件的基础使用
Feb 17 Javascript
在vue项目中引用Iview的方法
Sep 14 Javascript
用jQuery将JavaScript对象转换为querystring查询字符串的方法
Nov 12 jQuery
vue中v-text / v-html使用实例代码详解
Apr 02 Javascript
详解关于表格合并span-method方法的补充(表格数据由后台动态返回)
May 21 Javascript
vue数据响应式原理知识点总结
Feb 16 Javascript
使用Vue实现简单计算器
Feb 25 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/02/23 PHP
Zend Framework实现多服务器共享SESSION数据的方法
2016/03/22 PHP
Zend Framework教程之Zend_Helpers动作助手ViewRenderer用法详解
2016/07/20 PHP
php判断手机浏览还是web浏览,并执行相应的动作简单实例
2016/07/28 PHP
浅谈PHP发送HTTP请求的几种方式
2017/07/25 PHP
ajax无刷新动态调用股票信息(改良版)
2008/11/01 Javascript
Jquery创建层显示标题和内容且随鼠标移动而移动
2014/01/26 Javascript
动态加载js、css等文件跨iframe实现
2014/02/24 Javascript
Ubuntu中搭建Nodejs开发环境过程分享
2014/06/01 NodeJs
javascript比较两个日期的先后示例代码
2014/12/31 Javascript
Jquery代码实现图片轮播效果(一)
2015/08/12 Javascript
谈谈JavaScript异步函数发展历程
2015/09/29 Javascript
Javascript控制div属性动态变化实例分析
2015/10/08 Javascript
Javascript自执行匿名函数(function() { })()的原理浅析
2016/05/15 Javascript
JavaScript 节流函数 Throttle 详解
2016/07/04 Javascript
关于页面刷新vuex数据消失问题解决方案
2017/07/03 Javascript
vue项目中使用Svg的方法
2018/10/24 Javascript
js console.log打印对象时属性缺失的解决方法
2019/05/23 Javascript
Python是编译运行的验证方法
2015/01/30 Python
python数据结构之图深度优先和广度优先实例详解
2015/07/08 Python
Python八皇后问题解答过程详解
2019/07/29 Python
python使用SQLAlchemy操作MySQL
2020/01/02 Python
Pycharm 2020最新永久激活码(附最新激活码和插件)
2020/09/17 Python
了解一下python内建模块collections
2020/09/07 Python
Python字典实现伪切片功能
2020/10/28 Python
h5调用摄像头的实现方法
2016/06/01 HTML / CSS
美国高端牛仔品牌:Silver Jeans
2019/12/12 全球购物
婚礼新郎父母答谢词
2014/01/16 职场文书
水果连锁超市创业计划书
2014/01/24 职场文书
党员服务承诺书
2014/05/28 职场文书
2014乡镇干部对照检查材料思想汇报
2014/09/26 职场文书
2014年学生会个人工作总结
2014/11/07 职场文书
自主招生专家推荐信
2015/03/26 职场文书
军训新闻稿范文
2015/07/17 职场文书
小学远程教育工作总结
2015/08/13 职场文书
flex布局中使用flex-wrap实现换行的项目实践
2022/06/21 HTML / CSS