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 篱式条件判断
Aug 22 Javascript
jQuery中eq()方法用法实例
Jan 05 Javascript
JavaScript实现cookie的写入、读取、删除功能
Nov 05 Javascript
基于jquery fly插件实现加入购物车抛物线动画效果
Apr 05 Javascript
JSON对象 详解及实例代码
Oct 18 Javascript
JS闭包与延迟求值用法示例
Dec 22 Javascript
JS如何判断浏览器类型和详细区分IE各版本浏览器
Mar 04 Javascript
vue2.0结合DataTable插件实现表格动态刷新的方法详解
Mar 17 Javascript
jQuery实现验证码功能
Mar 17 Javascript
Angular 2父子组件数据传递之@Input和@Output详解(下)
Jul 05 Javascript
使用jQuery实现简单的tab框实例
Aug 22 jQuery
javascript this指向相关问题及改变方法
Nov 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
全国FM电台频率大全 - 21 海南省
2020/03/11 无线电
在PHP模板引擎smarty生成随机数的方法和math函数详解
2014/04/24 PHP
php中操作memcached缓存进行增删改查数据的实现代码
2014/08/15 PHP
php基于mcrypt的加密解密实例
2014/10/27 PHP
自己写的兼容ie和ff的在线文本编辑器类似ewebeditor
2012/12/12 Javascript
JQuery获取或设置ckeditor的数据(示例代码)
2013/11/15 Javascript
jquery 中的each()跳出循环的语句
2014/05/23 Javascript
jquery+easeing实现仿flash的载入动画
2015/03/10 Javascript
javascript和jquery实现用户登录验证
2016/05/04 Javascript
JavaScript绑定事件监听函数的通用方法
2016/05/14 Javascript
JS中递归函数
2016/06/17 Javascript
IE下JS保存图片的简单实例
2016/07/15 Javascript
使用JavaScript判断手机浏览器是横屏还是竖屏问题
2016/08/02 Javascript
jQuery Validate设置onkeyup验证的实例代码
2016/12/09 Javascript
详解用node搭建简单的静态资源管理器
2017/08/09 Javascript
vuex state及mapState的基础用法详解
2018/04/19 Javascript
VUE v-for循环中每个item节点动态绑定不同函数的实例
2018/09/26 Javascript
JS/HTML5游戏常用算法之碰撞检测 地图格子算法实例详解
2018/12/12 Javascript
Layui弹出层 加载 做编辑页面的方法
2019/09/16 Javascript
[03:49]显微镜下的DOTA2第十五期—VG登基之路完美团
2014/06/24 DOTA
Python正确重载运算符的方法示例详解
2017/08/27 Python
Python实现基本数据结构中栈的操作示例
2017/12/04 Python
用Python写一个模拟qq聊天小程序的代码实例
2019/03/06 Python
浅谈在django中使用filter()(即对QuerySet操作)时踩的坑
2020/03/31 Python
python使用建议与技巧分享(一)
2020/08/17 Python
总结python 三种常见的内存泄漏场景
2020/11/20 Python
HTML5的新特性(1)
2016/03/03 HTML / CSS
Bjorn Borg官方网上商店:国际运动时尚品牌
2016/08/27 全球购物
Boda Skins皮衣官网:奢侈皮夹克,全球配送
2016/12/15 全球购物
Unix/Linux开发面试题
2016/08/16 面试题
家教广告词
2014/03/19 职场文书
4s店市场专员岗位职责
2014/04/09 职场文书
店长岗位职责
2015/02/11 职场文书
大学生党员个人总结
2015/02/13 职场文书
Java网络编程之UDP实现原理解析
2021/09/04 Java/Android
mysql 8.0.27 绿色解压版安装教程及配置方法
2022/04/20 MySQL