jquery tab插件精简版

自己平时用得比较多tab功能,网上有很强大的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做选择器自己扩展去吧,呵呵

posted @   叶鹏  阅读(1911)  评论(2编辑  收藏  举报
编辑推荐:
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
阅读排行:
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 提示词工程——AI应用必不可少的技术
· Open-Sora 2.0 重磅开源!
· 周边上新:园子的第一款马克杯温暖上架
点击右上角即可分享
微信分享提示