使用jQuery 3.x实现简单选项卡

jQuery

需积分: 10 62 浏览量更新于2024-09-01 收藏 2KB TXT 举报

身份认证购VIP最低享 7 折!

30元优惠券

`.maindiv`).eq(idx).addClass("cur").siblings().removeClass("cur"); } //默认显示第一个 change(); }); </script> </head> <body> <divclass="box_out"> <divclass="top"> <buttonclass="topbuttoncur"id="btn1">选项卡1</button> <buttonclass="topbutton"id="btn2">选项卡2</button> <buttonclass="topbutton"id="btn3">选项卡3</button> </div> <divclass="main"> <divclass="maindivcur"> <imgsrc="image1.jpg"> </div> <divclass="maindiv"> <imgsrc="image2.jpg"> </div> <divclass="maindiv"> <imgsrc="image3.jpg"> </div> </div> </div> </body> </html> " "这个示例展示了如何使用jQuery来创建一个简单的选项卡功能。代码中，选项卡的切换是通过点击按钮来触发的，按钮和显示内容的div都包含在`.top`和`.main`类的容器中。当用户点击按钮时，对应的图片div将会显示，其他则隐藏。样式设置使得选项卡具有基本的布局和样式效果，如边距、宽度、高度和背景色变化。使用了jQuery 3.x版本进行事件监听和DOM操作。" 在这个jQuery选项卡的实现中，关键知识点包括： 1. **HTML结构**：页面包含一个外层容器`.box_out`，内含一个`.top`用于放置按钮，一个`.main`用于放置图片div。每个按钮有唯一的ID，如`btn1`、`btn2`、`btn3`，对应的图片div也有对应的类名，如`.maindiv1`、`.maindiv2`、`.maindiv3`。 2. **CSS样式**：CSS用于定义页面元素的基本样式，如清除内外边距，设置容器的宽高，以及按钮和图片div的样式。`.cur`类用于切换选中状态，例如改变背景颜色或显示/隐藏元素。 3. **jQuery库**：使用了jQuery 3.x版本，它简化了DOM操作和事件处理。在这个例子中，`<script>`标签引入了jQuery库。 4. **jQuery事件**：`$(function() { ... })`是jQuery的文档加载就绪事件，确保在执行代码前DOM已经加载完成。`click`事件监听按钮的点击，`index()`方法获取当前点击按钮的索引。 5. **jQuery选择器与方法**：`$(".topbutton")`和`$(".maindiv")`分别选择了所有的按钮和图片div。`eq(idx)`用于选取具有特定索引的元素，`addClass()`和`removeClass()`用于添加和移除类，从而改变元素的样式。 6. **封装函数**：`change()`函数负责切换选中状态，它将当前索引的按钮和图片div设置为显示，其他隐藏。这个函数被按钮的点击事件调用，并在页面加载时首次调用以显示默认选项卡。 7. **动态修改样式**：通过JavaScript和jQuery，我们可以根据用户的交互动态修改页面的样式和内容，使得网页具有更好的用户体验和交互性。这个选项卡实现的简单性和易读性使其成为学习jQuery DOM操作和事件处理的一个好例子。通过理解这段代码，开发者可以进一步掌握jQuery的基本用法，并将其应用到更复杂的网页交互设计中。

资源详情

资源推荐

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>选项卡</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box_out{
width: 500px;
height: 300px;
margin: 100px auto;
}
.top{
width: 100%;
height: 30px;
text-align: center;
}
.top button{
width: 100px;
border-bottom: 1px solid black;
}

img{
width: 500px;
height: 270px;
}

下载后可阅读完整内容，剩余2页未读，立即下载