jquery tab插件精简版分享

代码如下:

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

赞 (0)

相关推荐

  • jquery tab插件精简版分享

    复制代码 代码如下: /* * 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: n

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

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

    作者: 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的

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

    20个非常棒的 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的合并table相同单元格的插件(精简版)

    效果如下 原表格: col0 col1 col2 col3 SuZhou 11111 22222 SuZhouCity SuZhou 33333 44444 SuZhouCity SuZhou 55555 66666 SuZhouCity ShangHai 77777 88888 ShangHaiCity ShangHai uuuuu hhhhh ShangHaiCity ShangHai ggggg ccccc ShangHaiCity GuangZhou ttttt eeeee GuangZ

  • jquery tab插件制作实现代码

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

  • jQuery菜单插件用法实例

    本文实例讲述了jQuery菜单插件用法.分享给大家供大家参考.具体如下: 这里要分享的是一个菜单插件,在http://plugins.jquery.com/keleyi/ 看到的,使用找个插件可以制作页面底部向上弹出的菜单,不一定在页底,还有多种其他方式. jQuery菜单插件js文件: /*! * Keleyi(jQuery Menu) * version: 0.1.6 * Copyright (c) 2013 KeLeyi */ (function ($) { $.fn.keleyi = f

  • jQuery轮播图效果精简版完整示例

    jQuery轮播图效果精简版完整示例

    本文实例讲述了jQuery轮播图效果.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <meta ht

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

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

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

  • oracle 10g 精简版安装步骤分享

    今天遇到个软件要求安装oracle client端,于是考虑装精简版本的,就从http://www.oracle.com/technology/software/tech/oci/instantclient/index.html下载了instantclient-basic-win32-10.2.0.4.zip,该版本支持多种语言的.虽然最终精简版是安装成功了,但是该软件还是没有办法使用,估计精简版中没有它需要的文件.不过由此学会了装精简版还是不错地,呵呵!现将精简版的安装步骤如下写出来: 1-把

  • 30个最好的jQuery 灯箱插件分享

    30个最好的jQuery 灯箱插件分享

    jQuery 是非常流行的JS框架,其俨然已成了开发者的必备工具,其中的jQuery Lightbox插件更是为广大开发者所喜爱.它惊人的特征之一是jQuery Lightbox插件有很多变化. 下面介绍30个最好的jQuery Lightbox 插件,别忘了收藏它,以防未来的设计中错过它们中的一个. 1. Fancy Zoom (jQuery) 几天前,John重写了Cabel Sasser的FancyZoom,在Prototype和Scriptaculous程序库上.我将它引入到jQuery

随机推荐