jquery tab插件精简版分享_jquery

复制代码 代码如下:

/*
* 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做选择器自己扩展去吧,呵呵

时间: 2024-09-15 07:10:14

jquery tab插件精简版分享_jquery的相关文章

20个非常棒的 jQuery 幻灯片插件和教程分享_jquery

滑块和幻灯片效果是常用的内容展示方式之一,这是一种在有限的网页空间内展示系列项目时非常好的方法.今天这篇文章就与大家分享20个非常棒的 jQuery 幻灯片插件和教程. > Slider Gallery with jQuery Create an Image Rotator with Description (CSS/jQuery) Create a Slick and Accessible Slideshow Using jQuery Simple JQuery Image Slide Sho

jquery tab插件制作实现代码_jquery

jquery插件的基本格式: 复制代码 代码如下: (function($){ $.fn.tab = function(options){//$.fn后面的tab是这个插件的函数名称.可以更具自己喜好进行修改 var defaults = { //相关属性设置 } var options = $.extend(defaults, options); this.each(function(){ //实现的功能设置 }); }; })(jQuery); 我这里是做一个tab的插件,我来完善以上代码

jQuery TAB插件之TAB选项卡实现实例

在写插件之前对常见的TAB效果做了下总结,大体上也就那几种效果.插件力求简单易用,只要能实现常见的功能即可. 参数说明: •event •触发TAB的事件类型,鼠标悬停:mouseover,鼠标点击:click,默认为mouseover. •timeout •事件延迟,单位为毫秒,默认为0. •auto •自动切换,单位为毫秒,默认为0. •callback •回调函数,触发TAB时执行,函数的参数返回的是this. html代码  代码如下 复制代码 <DIV id=box>  <!-

jQuery tab插件使用说明

实例一 jQuery tab插件 结构:  代码如下 复制代码 <div class="tabWrap">   <ul class="tabBox">   <li><a href="#nogo">tab1 </a></li>   <li><a href="#nogo">tab2 </a></li>   <

jQuery实现输入框下拉列表树插件特效代码分享_jquery

本文实例讲述了jQuery实现输入框下拉列表树插件.分享给大家供大家参考.具体如下: 这是一款基于jquery实现的下拉列表树插件源码,是一款实用的jquery 树形下拉框下拉树代码.点击文本框即可弹出树形下拉列表,单击列表项即可选中列表对应文字,是一款非常实用的特效源码. 运行效果图:                     -------------------查看效果 下载源码-------------------   小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的

jquery衣服颜色选取插件效果代码分享_jquery

本文实例讲述了jquery衣服颜色选取插件效果.分享给大家供大家参考.具体如下: 这是一款基于jquery实现衣服颜色选取插件效果代码,有了这个插件可以为自己搭配衣服颜色,自己就是设计师,为自己设计独一无二的衣服,是一款非常实用的特效代码,值得大家学习. 运行效果图:-------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的jquery衣服颜色选取插件效果代码如下 <head> <

jQuery Tab插件 用于在Tab中显示iframe,附源码和详细说明_jquery

作者: think8848(公司主页: http://www.cleversoft.com, QQ: 166156888, Blog: http://think8848.cnblogs.com)  转载请保留此信息 CleverTabs是一款jQuery插件,所需jQuery版本:1.6.1,jQuery UI样式版本:1.8.13:其功能为创建jQuery UI风格的Tab用于显示iframe. 本示例中符加了jQuery.contextMenu插件,我修改了其样式,使用了jQuery UI的

jQuery满意度星级评价插件特效代码分享_jquery

这是一款基于jQuery 的星级评分效果实例,鼠标滑过星星区域显示评论信息提交内容,适用在评论表单里面,是表单美化提交内容的一种用户体验设计.  为大家分享的jQuery满意度星级评价插件特效代码如下 <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>满意度jQuery星级评分插件</title> &l

jQuery表格插件datatables用法汇总_jquery

DataTables是一个jQuery的表格插件,本文为大家分享了表格插件datatables用法,介绍了基础的部分知识,具体内容如下 一.初始化 在页面中 <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.11/css/jquery.dataTables.css&