手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >jquery tab插件精简版分享
jquery tab插件精简版分享
摘要:复制代码代码如下:/**jqpressToos1.0**Copyright(c)2011yepeng*Duallicensedunderth...

复制代码 代码如下:

/*

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

【jquery tab插件精简版分享】相关文章:

jQuery插件jRumble实现网页元素抖动

jQuery异步上传文件插件ajaxFileUpload详细介绍

javascript改变和控制显示的图片大小

jquery滚动特效集锦

jQuery插件zepto.js简单实现tab切换

jQuery插件制作之参数用法实例分析

jQuery插件expander实现图片翻转特效

jQuery插件Slider Revolution实现响应动画滑动图片切换效果

jquery.validate使用时遇到的问题

AspNet中使用JQuery boxy插件的确认框

精品推荐
分类导航