又一款jQuery插件,选择卡切换效果:
/*
<div class="tab-container">
<ul class="tab-title">
<li class="current"></li>
<li></li>
<li></li>
<li></li>
</ul>
<div class="tab-content"></div>
<div class="tab-content"></div>
<div class="tab-content"></div>
<div class="tab-content"></div>
</div>
*/
(function($){
$.fn.tab = function(options){
var ops = $.fn.extend({
//当前样式
currentClass : "current"
},options);
return this.each(function(){
var $this = $(this);
var $li = $this.find("ul > li");
var $index = $this.index();
$li.click(function(){
var _$this = $(this);
var n =_$this.index();
//移除样式
$li.removeClass(ops.currentClass);
//添加当前样式
_$this.addClass(ops.currentClass);
//隐藏所有
$this.find(".tab-content").hide();
//显示当前
$this.find(".tab-content:eq("+n+")").show();
});
});
}
})(jQuery);
.tab-container {}
.tab-container .current{}
.tab-container .tab-content{display:none}
分享到:
相关推荐
"jquery插件库-jquery仿京东商品详情页图片放大效果.zip"这个压缩包文件包含了一个jQuery插件,旨在模仿京东商品详情页中的图片放大效果,为用户提供更直观的商品查看体验。 首先,我们来详细了解一下jQuery插件的...
PageSwitch插件允许开发者根据需求进行自定义,比如修改默认样式,增加新的切换效果,或者与其他jQuery插件结合使用。其灵活性和可扩展性为开发者提供了广阔的创新空间。 六、兼容性和性能优化 考虑到浏览器兼容性...
总之,jQuery Waterwheel Carousel 是一个强大且灵活的图片轮播解决方案,它的水车式切换效果为网页增添了独特的视觉魅力。通过理解其基本用法和配置选项,开发者可以轻松地将其整合到自己的项目中,提升网页的交互...
"jquery插件库-jquery轮播加悬停效果.zip"这个压缩包文件显然是一个专门针对jQuery的插件集合,用于实现轮播图和悬停效果。下面我们将详细探讨这两个主要知识点。 1. jQuery轮播效果: 轮播(Carousel)是一种常见...
这个“jquery插件库-炫酷的jquery幻灯片插件.zip”文件显然包含了一个用于创建动态幻灯片展示的jQuery插件。下面,我们将深入探讨jQuery、jQuery插件以及这个特定的幻灯片插件相关的知识点。 **jQuery库** jQuery是...
这个“jquery插件库-jquery图片滑动效果.zip”文件显然是一个包含jQuery插件的集合,特别关注于实现图片滑动效果。这种效果常见于网站的轮播图、产品展示或相册功能,可以增强用户体验,使得网页更具动态性和吸引力...
综上所述,jQuery插件在表格分页中的应用为开发者提供了便利,通过选择合适的插件并结合实际需求进行定制,可以轻松实现高效、美观的分页效果。在实际开发中,应根据项目特性和性能需求,合理选择和配置插件,以达到...
本资源"jquery插件库-jquery3图片轮播.zip"是一个专为jQuery3打造的图片轮播插件,它旨在帮助开发者轻松实现动态、美观的图片展示效果,提升用户体验。 jQuery3是jQuery系列的一个重要版本,对性能进行了优化,同时...
jQuery插件是JavaScript库jQuery的扩展,它们为开发者提供了更多的功能和便利,分页插件就是其中之一。本文将深入探讨jQuery分页插件的原理、实现方式以及如何应用到实际项目中。 首先,我们要了解jQuery分页插件的...
jQuery插件通常是封装了一些功能的JavaScript代码,它们扩展了jQuery的核心功能,使得开发者能够快速实现特定效果或功能。在这个案例中,插件可能包含了监听事件、修改DOM元素样式以及处理用户交互逻辑等功能。 ...
"jquery插件库-jquery仿百度新闻焦点轮播.zip"是一个包含jQuery插件的压缩包,其目标是帮助开发者实现类似百度新闻的焦点轮播效果。这种效果常见于许多网站的首页,可以展示多张图片或信息,并通过自动切换和用户...
- **简介**:通用的jQuery插件,支持垂直和水平两种模式的菜单。 - **特点**: - 易于集成,文档齐全。 - 支持事件监听器,方便扩展功能。 ##### 4. Accordion Menu script - **简介**:另一种实现折叠菜单的方式...
手风琴菜单和酷炫的切换效果是jQuery插件中常见的交互元素,它们可以极大地提升用户界面的互动性和用户体验。本文将详细介绍这两种效果以及如何在项目中应用它们。 首先,我们来了解一下**手风琴菜单**。手风琴菜单...
这个压缩包“jquery插件库-jquery左侧导航滑动网页定位效果.zip”显然是关于一个jQuery插件,其核心功能是创建一个左侧导航,该导航在用户滚动页面时能够自动定位到相应的内容区域。 首先,让我们深入了解一下...
"jquery-stack-image-player.rar"是一个基于jQuery的图像轮播插件,它提供了多图自动轮播的功能,模拟酷狗音乐的图片展示效果,为网页增添了一份动态美。本文将深入探讨这一插件的工作原理、实现方式以及如何进行...
"前端项目-jquery-awesome-cursor"就是这样一个优秀的解决方案,它是一个基于jQuery的插件,允许我们使用FontAwesome库中的图标作为自定义CSS光标,为网页带来独特的视觉效果。 首先,我们需要理解jQuery。jQuery是...
标题提到的“jquery插件集-图片展示 幻灯片效果 图片浏览”聚焦于利用jQuery实现的图片展示解决方案,这些插件通常用于网站设计,提升用户体验,特别是对于产品展示、摄影网站或任何需要吸引用户注意力的地方。...
- **动画效果**:结合jQuery动画,实现二维码的动态加载或切换。 7. **注意事项** - 二维码的大小应适中,过大可能影响页面布局,过小可能导致识别困难。 - 数据量过多时,可能会导致二维码无法被正确扫描,应...
jquery插件库大全(200个): jqueryQQ表情插件 jquery下拉菜单导航 jquery下拉菜单栏 jquery仿Windows系统选中图标效果 jquery仿京东商品详情页图片放大效果 jquery仿百度新闻焦点轮播 jquery分离布局模版 jquery...
jQuery UI 是一个基于 jQuery 库的开源项目,提供了一套完整的用户界面组件,包括可交互的控件、动画效果和可自定义的主题。在本篇文章中,我们将深入探讨 jQuery UI 1.10.3 版本的自定义特性,帮助开发者更好地理解...