`
caiceclb
  • 浏览: 241918 次
  • 性别: 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选项卡切换插件制作slider滑动选项卡切换

    本教程将聚焦于利用jQuery来制作一个滑动选项卡切换插件,即“slider滑动选项卡切换”。这种组件常见于网站的导航、展示内容或者产品介绍中,能够以动态、吸引人的形式展示信息。 首先,我们需要理解jQuery的基本...

    jquery 切换选项卡

    在这个场景中,"jquery 切换选项卡" 主要指的是使用 jQuery 来实现的选项卡效果。 首先,我们来理解一下基本的选项卡结构。一个简单的选项卡通常由以下几个部分组成: 1. 选项卡头(Tab Headers):显示各个选项卡...

    jQuery tab选项卡切换插件和css3属性结合动画选项卡切...

    在网页设计中,jQuery Tab选项卡切换是一种常见的交互元素,用于组织和展示大量内容,而不会使页面显得拥挤。这个插件允许用户通过点击不同的标签来切换显示相应的内容区域,提高了用户体验。结合CSS3属性,我们可以...

    jquery tab选项卡插件 轻量级tab选项卡插件支持鼠标滑过、点击、自动切换、数据回调等功能

    - **js**:这个文件夹包含了JavaScript代码,包括jQuery库和可能的自定义脚本,如选项卡插件的核心功能实现和配置设置。 在实际应用中,开发者需要在`index.html`中引入jQuery库和选项卡插件的JS文件,并根据需求...

    jQuery选项卡切换特效代码.zip

    jQuery选项卡切换特效代码是一款基于jquery-1.7.2.min.js制作的图片选项卡切换效果网页代码。鼠标经过各个选项卡图标菜单,自动进行内容切换,图文并茂,简洁大气,效果不错,横向选项卡,兼容各大主流浏览器。

    jQuery选项卡切换图片异步加载代码.zip

    在网页设计中,jQuery选项卡切换图片异步加载是一种常见的用户体验优化技术,它能提高页面加载速度并降低服务器压力。这种技术尤其适用于图片丰富的网站,如图片相册、产品展示等场景。本压缩包"jQuery选项卡切换...

    jquery选项卡插件多种tab标签切换效果

    总结来说,"jquery选项卡插件多种tab标签切换效果"涵盖了从基本的选项卡切换到高级的交互功能,包括动态加载、过渡动画、键盘和触摸事件支持以及响应式设计。掌握这些技术可以帮助开发者创建更吸引用户、更易用的Web...

    jQuery大气图标选项卡切换特效插件

    jQuery大气图标选项卡切换特效插件是一款用于网页交互设计的工具,它结合了jQuery库的高效性能和美观的视觉效果,旨在提升用户在网站上的体验。这款插件以大气、直观的设计风格,通过图标和选项卡的切换效果,使得...

    jQuery图标导航选项卡切换代码.zip

    jQuery图标导航选项卡切换代码是一个常见的解决方案,它能够增强网站的互动性,使用户更方便地浏览和操作内容。这个压缩包"jQuery图标导航选项卡切换代码.zip"包含了实现这一功能所需的所有资源。 jQuery是一个轻量...

    带CSS3过渡动画效果的jQueryTabs选项卡插件

    在本文中,我们将深入探讨"带CSS3过渡动画效果的jQueryTabs选项卡插件",这是一个结合了jQuery和CSS3技术的高效、轻量级的选项卡解决方案。jQueryTab插件以其简洁的API、响应式设计和丰富的CSS3动画效果为特点,广泛...

    jQuery选项卡Tabslet插件.zip

    考虑到浏览器兼容性,jQuery选项卡插件通常能良好地运行在主流的现代浏览器上,包括Chrome、Firefox、Safari、Edge以及较新的IE版本。然而,对于旧版浏览器,可能需要检查并解决潜在的兼容性问题。 10. **社区支持...

    jQuery选项卡切换带图片列表滚动代码

    本示例“jQuery选项卡切换带图片列表滚动代码”着重于利用jQuery实现一个功能丰富的用户界面组件,该组件结合了选项卡切换与图片列表的自动滚动效果。这个功能在很多网站中都很常见,比如产品展示、新闻资讯或用户...

    可多次使用的jQuery tab选项卡插件.zip

    jQuery Tab选项卡插件是一种广泛应用于网页开发中的交互式组件,它允许用户通过多个标签页来组织和切换内容。在本案例中,"可多次使用的jQuery tab选项卡插件.zip"是一个包含资源的压缩包,提供了可以重复利用的...

    凡客诚品jQuery选项卡切换.zip

    "凡客诚品jQuery选项卡切换.zip" 这个标题指的是一个基于jQuery的代码资源包,主要用于实现类似凡客诚品电商网站在手机客户端的选项卡切换功能。这种功能常见于移动应用或者响应式网页设计中,通过点击不同的选项卡...

    可以无限增加和华丽滚动的jquery选项卡插件

    标题中的“可以无限增加和华丽滚动的jquery选项卡插件”指的是一个基于jQuery库的UI组件,它允许用户创建能够无限滚动的选项卡界面。这种插件通常用于展示大量内容,如新闻、产品目录或者用户反馈,使得用户可以通过...

    世界杯专题jquery选项卡切换.zip

    描述提到"世界杯专题jquery选项卡切换是一款jquery tab选项卡插件制作的世界杯专题选项卡自动切换代码",这表明该压缩包中包含的代码是专门为了创建一个具有自动切换功能的世界杯主题选项卡。这种效果通常用于网站上...

    基于jQuery的对象切换插件,JQuery图片切换

    **jQuery对象切换插件与图片切换详解** 在Web开发中,动态展示内容是提升用户体验的重要手段,而基于jQuery的对象切换插件就是实现这一目标的有效工具。jQuery作为一个强大的JavaScript库,简化了DOM操作,使得动态...

    自动滚动切换的jquery选项卡特效插件

    标题提到的“自动滚动切换的jQuery选项卡特效插件”是一种常见且吸引用户的界面元素,常用于展示内容丰富的网站或应用,如产品介绍、新闻动态、用户评价等。这种插件可以将大量信息组织成可滚动的选项卡形式,以提高...

    jQuery选项卡选项卡选项卡

    本示例“jQuery选项卡”旨在演示如何利用jQuery实现动态切换的选项卡功能,提供多样的皮肤选择,使得用户界面更加友好且互动性强。 选项卡组件是Web界面设计中的常见元素,用于组织和展示大量信息。它通过将相关...

Global site tag (gtag.js) - Google Analytics