`
caiceclb
  • 浏览: 243851 次
  • 性别: Icon_minigender_1
  • 来自: 郑州
社区版块
存档分类
最新评论

超简易jQuery选项卡切换插件

阅读更多
/* 简单选项卡插件 */
;(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);
分享到:
评论

相关推荐

    简易实用的jQuery Tab选项卡菜单插件

    **jQuery Tab选项卡菜单插件**是一种常见的网页交互元素,用于组织和展示多部分内容,如文本、图片或视频。在网页设计中,Tab组件能够帮助用户更有效地浏览和导航,提高用户体验。本插件以其简易实用的特点,成为...

    jQuery简单实现tab选项卡切换效果

    总结以上知识点,本文通过具体的代码示例,详细讲解了如何利用jQuery简单实现Tab选项卡切换效果,并如何将此逻辑封装成可复用的插件。通过合理的设计和实现,可以让页面用户界面更加友好和实用。

    jquerytabSelect简易的tab选项卡组件

    这些事件包括`tabSelect`(选项卡切换时触发)和`beforeTabSelect`(切换前触发)。例如,监听`tabSelect`事件: ```javascript $('.tab-select').on('tabSelect', function(event, tabIndex) { console.log('当前...

    基于JQuery的6个Tab选项卡插件

    1. jQuery选项卡界面:这种类型的菜单允许使用jQuery的滑动效果创建选项卡菜单,通常用于网页设计和开发中。通过学习相关教程,开发者可以使用向下滑动/向上滑动效果来创建属于自己的选项卡菜单。这种界面可以提升...

    JS简易的年历选项卡效果类似滑动门且有当月备注信息.zip

    以上是实现“JS简易的年历选项卡效果类似滑动门且有当月备注信息”的主要技术要点。实际开发中,开发者可能还会结合其他前端框架(如React、Vue或Angular)或库(如Bootstrap)来增强功能和提高开发效率。总的来说,...

    asoft签到管理系统tykq3.5_build20110125

    6、首页增加“实时签到查看”选项卡 ,该选项卡可以在后台设定允许查看的权限组。 在后台系统设置->勾选后,可以在 start页面 [main.asp]看到。) 7、管理员可以在后台自定义用户状态(未审核、已审核、出差状态)...

Global site tag (gtag.js) - Google Analytics