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 相关文章推荐
JavaScript CSS菜单功能 改进版
Dec 20 Javascript
IE8 原生JSON支持
Apr 13 Javascript
JS删除数组元素的函数介绍
Mar 27 Javascript
javascript根据像素点取位置示例
Jan 27 Javascript
javascript实现的平方米、亩、公顷单位换算小程序
Aug 11 Javascript
JS检测移动端横竖屏的代码
May 30 Javascript
使用Bootstrap美化按钮实例代码(demo)
Feb 03 Javascript
JavaScript hasOwnProperty() 函数实例详解
Aug 04 Javascript
form表单序列化详解(推荐)
Aug 15 Javascript
Vue组件开发技巧总结
Mar 04 Javascript
React如何避免重渲染
Apr 10 Javascript
在JavaScript中如何访问暂未存在的嵌套对象
Jun 18 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
星际中的相关伤害
2020/03/04 星际争霸
数字转英文
2006/12/06 PHP
PHP XML备份Mysql数据库
2009/05/27 PHP
php函数传值的引用传递注意事项分析
2016/06/25 PHP
用javascript实现页面打印的三种方法
2007/03/05 Javascript
jQuery的实现原理的模拟代码 -2 数据部分
2010/08/01 Javascript
jQuery 源码分析笔记(6) jQuery.data
2011/06/08 Javascript
IE6-IE9不支持table.innerHTML的解决方法分享
2012/09/14 Javascript
基于jquery编写的横向自适应幻灯片切换特效的实例代码
2013/08/06 Javascript
jquery select 设置默认选中的示例代码
2014/02/07 Javascript
javascript中setTimeout和setInterval的unref()和ref()用法示例
2014/11/26 Javascript
JavaScript实现的encode64加密算法实例分析
2015/04/15 Javascript
AngularJS身份验证的方法
2016/02/17 Javascript
javascript数字验证的实例代码(推荐)
2016/08/20 Javascript
js获取腾讯视频ID的方法
2016/10/03 Javascript
使用node.js中的Buffer类处理二进制数据的方法
2016/11/26 Javascript
jQuery实现鼠标滑过图片移动特效
2016/12/08 Javascript
详解vue 模拟后台数据(加载本地json文件)调试
2017/08/25 Javascript
基于JavaScript 性能优化技巧心得(分享)
2017/12/11 Javascript
微信小程序搭建(mpvue+mpvue-weui+fly.js)的详细步骤
2018/09/18 Javascript
vue 项目地址去掉 #的方法
2018/10/20 Javascript
Vue CLI3.0中使用jQuery和Bootstrap的方法
2019/02/28 jQuery
解决vue 单文件组件中样式加载问题
2019/04/24 Javascript
Antd的Table组件嵌套Table以及选择框联动操作
2020/10/24 Javascript
Python的Django框架安装全攻略
2015/07/15 Python
Windows上配置Emacs来开发Python及用Python扩展Emacs
2015/11/20 Python
Scrapy框架CrawlSpiders的介绍以及使用详解
2017/11/29 Python
Python实现PS滤镜功能之波浪特效示例
2018/01/26 Python
Pycharm 2020最新永久激活码(附最新激活码和插件)
2020/09/17 Python
Django重设Admin密码过程解析
2020/02/10 Python
django models里数据表插入数据id自增操作
2020/07/15 Python
NBA德国官方网上商店:NBA Store德国
2018/04/13 全球购物
美国在线自行车商店:Jenson USA
2018/05/22 全球购物
创文明城市标语
2014/06/16 职场文书
建筑质检员岗位职责
2015/04/08 职场文书
如何利用React实现图片识别App
2022/02/18 Javascript