以前写过一篇 tabs选项卡切换效果，不过是用原生 javascript 写的，最近在学习 jquery，今天抽空用 jquery 重写了这个效果。
效果图如下：
html 代码如下：
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"/> <title>选项卡（jquery版）</title> <link rel="stylesheet" type="text/css" href="css/base.css" media="all"/> <style type="text/css"> .tabs{width:500px;margin:100px auto;} .tabs_menu{font-size:0;} .tabs_menu a{padding:5px;border:1px solid blue;font-size:12px;margin-left:10px;background:#ECECEC;float:left;} .tabs_menu .selected{background:white;border-bottom:1px solid white;position:relative;} .tabs_content{border:1px solid blue;padding:10px;margin-top:-1px;} </style> </head> <body> <div class="tabs"> <h2 class="tabs_menu clearfix"> <a href="javascript:;" class="selected">新闻</a> <a href="javascript:;">体育</a> <a href="javascript:;">娱乐</a> </h2> <div class="tabs_content_wrap"> <div class="tabs_content">新闻新闻新闻新闻新闻新闻</div> <div class="tabs_content hide">体育体育体育体育体育体育</div> <div class="tabs_content hide">娱乐娱乐娱乐娱乐娱乐娱乐</div> </div> </div> </body> </html> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript"> var $menu = $('.tabs > .tabs_menu a'); $menu.click(function(){ $(this).addClass('selected').siblings().removeClass('selected'); var index = $menu.index(this); $('.tabs_content_wrap > .tabs_content').eq(index).show().siblings().hide(); }); </script>
小提示：如果使用 jquery，则需要引入 jquery 库。
PS：以上是本人通过所学的 jquery 知识，随意写的一些效果。
相关推荐
在本文中，我们将深入探讨"带CSS3过渡动画效果的jQueryTabs选项卡插件"，这是一个结合了jQuery和CSS3技术的高效、轻量级的选项卡解决方案。jQueryTab插件以其简洁的API、响应式设计和丰富的CSS3动画效果为特点，广泛...
- `event`: 触发选项卡切换的事件，默认为`click`。 - `heightStyle`: 控制选项卡高度，可选值有`auto`（适应内容高度）、`fill`（填充父元素高度）和`content`（不设置高度）。 此外，还可以使用一些方法来操作...
在网页设计中，选项卡（Tab）是一种...通过查看这些文件，你可以更深入地学习和理解如何使用 jQuery 实现一个高效的选项卡切换效果。如果你遇到任何问题，或者想要了解更多细节，可以进一步研究这个压缩包内的资源。
"jquery tabs选项卡设计效果"是利用jQuery和Bootstrap框架实现的一种常见的网页组件，它能有效地组织和展示内容，提升用户体验。 Bootstrap是一个流行的前端开发框架，提供了丰富的预设样式和组件，包括选项卡...
"jQuery css3彩色动画Tabs选项卡切换特效"是将jQuery库与CSS3技术结合，实现色彩丰富、动态过渡的选项卡切换效果。接下来，我们将深入探讨这个主题中的关键知识点。 首先，jQuery是一个轻量级的JavaScript库，它...
在网页设计中，jQuery Tab选项卡切换是一种常见的交互...通过分析这些文件，你可以更好地理解如何将jQuery与CSS3属性结合，创建出更吸引人的选项卡切换动画效果。记住，不断实践和优化代码是提升网页交互体验的关键。
这包括初始化jQuery tabs插件，设置选项卡切换的事件监听器，以及定义自动切换的计时器。例如，使用`.tabs()`方法初始化选项卡，使用`.tabs('rotate', time)`方法设置每隔特定时间（time）自动切换到下一个选项卡。 ...
在选项卡切换中，CSS3可以用来定义每个选项卡的样式，以及在切换过程中实现平滑的过渡效果。 1. **HTML 结构**： 选项卡的基本HTML结构通常包含一个容器（用于放置选项卡和内容区域），一组选项卡按钮，以及多个...
通过学习和实践这个基于jQuery的tabs切换源码，你可以提升网页动态效果的实现能力，更好地理解和应用jQuery库。这不仅适用于个人项目，也是Web开发中的一项基础技能，广泛应用于各种类型的网站和应用。
这个特定的"带CSS3过渡动画效果的jQuery Tabs选项卡插件"，通过结合jQuery的强大功能与CSS3的动画特性，为用户提供更加流畅、动态的交互体验。 CSS3过渡（Transitions）是CSS的一个重要模块，它允许我们在改变一个...
jQuery彩色动画Tabs选项卡特效是一种常见的网页交互设计，它通过使用JavaScript库jQuery实现了一系列色彩丰富的动画效果，旨在提升用户体验和网站界面的吸引力。这个特效允许用户在不同的内容区域之间轻松切换，每个...
对于"移动友好且兼容IE8的jQuery Tabs选项卡插件"这一主题，我们将深入探讨jQuery库的核心特性，以及如何利用这种特性创建一个既适合移动设备又对老旧浏览器如IE8兼容的选项卡组件。 首先，jQuery库的核心特性包括...
这款名为"简单响应式jQuery Tabs选项卡插件"的工具正是为了实现这一目标而设计的。它是一个轻量级的JavaScript解决方案，利用jQuery库的强大功能来创建灵活的选项卡组件，能够自动适应屏幕大小，确保在桌面、平板...
"简单响应式jQuery Tabs选项卡插件"正是这样一款工具，它结合了jQuery的强大功能和响应式布局的概念，旨在提升网页的交互性和易用性。 jQuery是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理、动画制作和...
除了基本的选项卡切换，CardTabs可能还支持其他进阶功能，如动画效果、自动轮播、点击事件处理等。开发者可以通过查阅文档或源代码了解更多信息。 总的来说，jQuery CardTabs是一个实用且灵活的选项卡解决方案，...
本教程将聚焦于利用jQuery来制作一个滑动选项卡切换插件，即“slider滑动选项卡切换”。这种组件常见于网站的导航、展示内容或者产品介绍中，能够以动态、吸引人的形式展示信息。 首先，我们需要理解jQuery的基本...
"简单的jquery tab选项卡切换代码样式"是指利用jQuery实现的一种常见用户界面元素——选项卡（Tab）的交互功能。选项卡是网页设计中常用的布局方式，它可以有效地组织和展示大量内容，提高用户体验。下面我们将详细...
jQuery Tabs插件是一款广泛应用于网页开发中的选项卡组件，它基于流行的JavaScript库jQuery构建，能够帮助开发者轻松实现页面上的内容分块展示。选项卡插件是网页设计中一种常见的交互元素，通过它可以将大量信息...