`

jquery tab切换

阅读更多
(function($){
	$.HoverTabs=function(options){
		var ops=$.extend($.HoverTabs.defaults,options);
		this.tabs=ops.tabs;
		this.tabContents=ops.tabContents;
		this.curIndex=0;
		this.intevalTime=ops.intevalTime;
		var _this=this;
		this.showTab=function(){
			_this.clearTime();
			var curTab=$(_this.tabs[_this.curIndex]);
			_this.timeout=setTimeout(function(){
				_this.tabs.each(function(j){
					$(this).removeClass("a"+(j+1)+"_current");
				});
				curTab.addClass("a"+(_this.curIndex+1)+"_current");
				_this.tabContents.hide();
				///扩展,可先检测内容的html是否已被加载过,如果未加载可以有ajax操作
				_this.tabContents.eq(_this.curIndex).show();
			},_this.intevalTime);
		};
		this.clearTime=function(){
			clearTimeout(_this.timeout);
		}
		_this=this;
		$(_this.tabs).each(function(i){
			$(this).hover(function(){
				_this.curIndex=i;
				_this.showTab();
			},
			function(){
				_this.clearTime();
			});
		});
	};
	$.HoverTabs.defaults = {
			tabs : null, //tab标题
			tabContents : null, //tab内容
			intevalTime	: 100 //延迟时间间隔
	};
})(jQuery);

 

分享到:
评论

相关推荐

    jquery tab切换,jquery tab切换,jquery tab切换,jquery tab切换

    jquery tab切换,jquery tab切换,js点击按钮切换图片jquery tab切换,jquery tab切换,jquery tab切换,js点击按钮切换图片jquery tab切换,jquery tab切换,jquery tab切换,js点击按钮切换图片jquery tab切换,...

    jquery tab 切换

    首先,jQuery库提供了丰富的DOM操作、事件处理和动画效果,使得创建Tab切换变得简单。要实现Tab切换,你需要在HTML中定义Tab面板的结构。通常,这包括一个包含各个Tab标题的容器(如`<ul>`或`<nav>`)和一个用于显示...

    jquery tab 切换页面 支持iframe

    在网页设计中,jQuery Tab是一种常见的用户界面组件,用于实现多面板切换效果,通常用于展示不同的内容区域。当这些内容区域包含外部资源,如网页或应用程序时,我们可能需要使用`iframe`(Inline Frame)来嵌入这些...

    jquery tab 切换效果

    jQuery 的 Tab 切换效果是常见的用户界面元素,用于展示多组相关但需要分页显示的信息。这个效果使得网页内容更易于组织和导航,为用户提供友好的交互体验。 标题中的“jquery tab 切换效果”指的是利用 jQuery ...

    jquery tab切换重复使用

    在这个特定的场景中,我们关注的是“jquery tab切换重复使用”,这是一个利用jQuery实现的Tab组件,允许在网页中多次复用,以创建用户友好的界面。 首先,让我们来理解Tab组件的基本概念。Tab组件是一种常见的网页...

    jquery渐变切换tab标签

    3. **jQuery初始化**:在页面加载完成后,使用`$(document).ready()`函数来初始化Tab切换功能。这通常包括隐藏所有内容区域,只显示第一个内容,以及添加点击事件监听器到每个Tab标题。 4. **事件处理**:当用户...

    jQuery 实现tab切换效果

    在本文中,我们将深入探讨如何使用JavaScript库jQuery来实现一种常见的网页交互功能——Tab切换效果。Tab切换是一种用户界面设计模式,它允许用户在多个视图之间切换,每个视图通常展示不同的内容区域。这种效果在...

    jquery tab插件

    使用jq写的关于tab切换的插件,使用面向对象组件化开发

    jQuery实现简单tab切换

    本示例将探讨如何利用jQuery实现一个基本的Tab切换功能,这对于创建交互式用户界面至关重要。 首先,我们需要理解Tab切换的基本原理。Tab切换通常涉及一组隐藏或显示的内容区域,每个区域对应一个可点击的Tab按钮。...

    JQUERY实现iframe页面切换功能

    本篇文章将详细讲解如何利用jQuery实现iframe页面的切换功能,以便于创建更丰富的用户体验和更高效的页面加载策略。 首先,我们需要理解iframe的基本概念。Iframe(Inline Frame)是HTML中的一个元素,它允许我们在...

    jQuery TAB 带动画滚动切换.rar

    在本文中,我们将深入探讨如何使用jQuery实现一个带有动画效果的TAB切换功能,如同"jQuery TAB 带动画滚动切换.rar"所描述的那样。这个功能允许用户在不同的内容区域之间进行平滑的滚动切换,同时伴随着吸引人的视觉...

    Jquery实现tab切换

    jQuery是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理和动画效果,使得实现Tab切换功能变得更加简单。下面我们将详细讨论如何使用jQuery实现Tab切换功能。 首先,我们需要在HTML中构建Tab的结构。一个...

    jQuery Tab选项卡切换_files.rar

    《jQuery Tab选项卡切换技术详解》 在网页设计中,Tab选项卡是一种常见的交互元素,它可以帮助用户在有限的空间内组织大量信息,提高用户体验。本文将深入探讨如何使用jQuery和CSS3实现动态的Tab选项卡切换效果,...

    jquery写的tab切换的插件

    在实现Tab切换功能时,jQuery提供了一套简洁的API来绑定事件、切换类名,以及动态修改DOM元素的属性。 Tab切换的基本结构通常包括一个包含多个选项卡(Tab)的容器和相对应的内容区域。每个选项卡都关联一个内容...

    Jquery實現的tab切換

    本教程将详细讲解如何利用jQuery实现一个简单的Tab切换功能,帮助提升用户界面的交互体验。 首先,我们需要在HTML文档中引入jQuery库。最新的jQuery库文件可以通过官方下载或CDN链接获取。例如,你可以使用以下代码...

    jQuery带tab切换搜索框样式代码

    本示例“jQuery带tab切换搜索框样式代码”是关于如何利用jQuery实现一个功能丰富的搜索框,该搜索框集成了选项卡切换功能,为用户提供更便捷的交互体验。以下是对这个主题的详细讲解: 1. **jQuery基础**:首先,...

    jquery滑动切换tab

    在网页设计中,用户体验是一个至关重要的因素,而jQuery滑动切换tab功能则是一种常见的交互设计方式,能够提高用户的浏览和操作体验。这个功能允许用户通过鼠标悬停在不同的选项卡上,实现内容区域的平滑过渡,使得...

    jquery tab移动切换

    在实现Tab切换时,jQuery提供了简洁的API,使得开发者能够快速构建功能丰富的界面。 ### 2. Tab切换基本结构 一个基本的Tab组件通常包含两部分:HTML结构和CSS样式。HTML结构一般由一个容器元素(如div)包裹一组...

    jQuery Tab页切换

    在网页设计中,jQuery Tab页切换是一种常见的交互元素,它能有效地组织和展示大量内容,让用户以简洁的方式浏览和切换不同的部分。这个“jQuery Tab页切换”资源包含JS(JavaScript)和CSS(Cascading Style Sheets...

Global site tag (gtag.js) - Google Analytics