超简易jQuery选项卡切换插件

最新推荐文章于 2022-02-25 20:00:37 发布

最新推荐文章于 2022-02-25 20:00:37 发布 · 189 阅读

文章标签：

#jQuery #C #C++ #C# #CSS #ViewUI

jQuery 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了一个基于jQuery的简单选项卡插件实现方法。该插件通过自定义配置项来控制选项卡的行为，如标题项、内容项的CSS选择器、激活状态的样式类以及触发事件等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

/* 简单选项卡插件 */
;(function($){
    $.fn.TabSimple = function(c){
    	c = $.extend({
			tab: ".s-tab", //标题项
			con: ".s-con", //内容项
			curr: "curr",  //当前高亮的css类名
			event: "click" //触发的事件，jQuery所支持的所有事件
    	},c);
	    return this.each(function(){
	        var tab = $(this).find(c.tab);
	    	var con = $(this).find(c.con);
	    	tab.bind(c.event, function(){
	    		var i = tab.index($(this));
	    		tab.removeClass(c.curr); //或tab.find("." + c.curr).removeClass(c.curr)
	    		$(this).addClass(c.curr);
	    		con.hide().eq(i).show();
	    	});
		});	
    };
})(jQuery);