| 登录 注册 |
好的，下面是一个使用 JavaScript 和 CSS 实现简单选项卡切换的示例。
核心思路：
1. HTML 结构：
* 需要一个容器来包裹整个选项卡组件。
* 需要一个列表（如 <ul> 或 <ol>）来存放选项卡的标题（<li>）。
* 需要一个容器来存放每个选项卡对应的内容区域。
* 每个内容区域通常会有一个与之关联的标题。
2. CSS 样式：
* 隐藏所有选项卡内容区域，只显示当前活动的那个。
* 为活动的选项卡标题添加一个高亮样式（例如，改变背景色、字体加粗等）。
* 控制选项卡的布局和外观。
3. JavaScript 逻辑：
* 为每个选项卡标题添加点击事件监听器。
* 当某个标题被点击时：
* 移除所有选项卡标题的“活动”状态。
* 给被点击的标题添加“活动”状态。
* 隐藏所有选项卡内容区域。
* 显示与被点击标题对应的选项卡内容区域。
—
HTML (index.html):html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>简单选项卡切换</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="tab-container">
<ul class="tab-nav">
<li class="tab-item active" data-tab="tab1">选项卡 1</li>
<li class="tab-item" data-tab="tab2">选项卡 2</li>
<li class="tab-item" data-tab="tab3">选项卡 3</li>
</ul>
<div class="tab-content-wrapper">
<div id="tab1" class="tab-content active">
<h2>这是选项卡 1 的内容</h2>
<p>这里是第一个选项卡的一些详细信息。</p>
</div>
<div id="tab2" class="tab-content">
<h2>这是选项卡 2 的内容</h2>
<p>这是第二个选项卡的内容。你可以看到它只有在被选中时才显示。</p>
</div>
<div id="tab3" class="tab-content">
<h2>这是选项卡 3 的内容</h2>
<p>这是第三个选项卡的内容，与前两个类似，但有自己的独特信息。</p>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
CSS (style.css):css
/* 基本样式重置 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: sans-serif;
background-color: #f4f4f4;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
/* 选项卡容器 */
.tab-container {
width: 80%!;(MISSING)
max-width: 600px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
overflow: hidden; /* 确保子元素不会超出圆角 */
}
/* 选项卡导航 (标题列表) */
.tab-nav {
list-style: none;
display: flex;
border-bottom: 1px solid #ddd;
}
/* 选项卡标题 */
.tab-item {
padding: 15px 20px;
cursor: pointer;
font-weight: bold;
color: #555;
transition: color 0.3s ease, border-bottom-color 0.3s ease;
border-bottom: 3px solid transparent; /* 为活动状态预留空间 */
}
/* 活动的选项卡标题 */
.tab-item.active {
color: #007bff; /* 蓝色，表示活动状态 */
border-bottom-color: #007bff; /* 底部添加蓝色边框 */
}
/* 选项卡内容包裹器 */
.tab-content-wrapper {
padding: 20px;
}
/* 单个选项卡内容 */
.tab-content {
display: none; /* 默认隐藏所有内容 */
}
/* 活动的选项卡内容 */
.tab-content.active {
display: block; /* 显示活动的内容 */
}
.tab-content h2 {
margin-bottom: 15px;
color: #333;
}
.tab-content p {
color: #666;
line-height: 1.6;
}
JavaScript (script.js):javascript
document.addEventListener('DOMContentLoaded', function() {
// 获取所有选项卡导航项
const tabItems = document.querySelectorAll('.tab-item');
// 获取所有选项卡内容区域
const tabContents = document.querySelectorAll('.tab-content');
// 为每个选项卡导航项添加点击事件监听器
tabItems.forEach(function(item) {
item.addEventListener('click', function() {
// 1. 移除所有选项卡标题的 'active' 类
tabItems.forEach(function(navItem) {
navItem.classList.remove('active');
});
// 2. 给当前被点击的选项卡标题添加 'active' 类
this.classList.add('active');
// 3. 获取当前被点击标题的 data-tab 属性值
const targetTabId = this.getAttribute('data-tab');
// 4. 移除所有选项卡内容的 'active' 类
tabContents.forEach(function(content) {
content.classList.remove('active');
});
// 5. 根据 targetTabId 找到对应的选项卡内容，并添加 'active' 类
const targetTabContent = document.getElementById(targetTabId);
if (targetTabContent) {
targetTabContent.classList.add('active');
}
});
});
});
—
如何使用：
1. 将上面的 HTML 代码保存为 index.html 文件。
2. 将上面的 CSS 代码保存为 style.css 文件，并放在与 index.html 同一个目录下。
3. 将上面的 JavaScript 代码保存为 script.js 文件，并放在与 index.html 同一个目录下。
4. 用浏览器打开 index.html 文件，你就能看到一个简单的选项卡切换效果了。
—
代码解释：
* HTML:
* tab-container: 整个选项卡组件的父容器。
* tab-nav: 包含所有选项卡标题的无序列表。
* tab-item: 每个选项卡的标题，li 元素。
* class="tab-item active": active 类用于标记初始时显示的选项卡。
* data-tab="tab1": 这是一个自定义数据属性，用于关联标题和内容。当点击这个 li 时，我们会读取这个值来找到对应的内容。
* tab-content-wrapper: 包含所有选项卡内容区域的容器。
* tab-content: 每个选项卡的内容区域，div 元素。
* id="tab1": 与 tab-item 的 data-tab 属性相对应。
* class="tab-content active": active 类用于标记初始时显示的内容区域。
* CSS:
* .tab-item.active: 当 tab-item 同时拥有 active 类时，它会获得高亮样式（蓝色字体和底部蓝色边框）。
* .tab-content: display: none; 让所有内容区域默认都是隐藏的。
* .tab-content.active: 当 tab-content 同时拥有 active 类时，display: block; 会显示它。
* JavaScript:
* DOMContentLoaded: 确保脚本在整个 HTML 文档加载和解析完成后才执行。
* querySelectorAll: 用于获取页面上所有匹配选择器的元素。
* forEach: 遍历获取到的节点列表，为每个元素添加事件监听器。
* addEventListener('click', ...): 当元素被点击时触发。
* this.classList.add('active') / this.classList.remove('active'): this 指的是被点击的那个 tab-item 元素，通过 classList 来添加或移除 CSS 类。
* this.getAttribute('data-tab'): 获取当前被点击的 tab-item 的 data-tab 属性值。
* document.getElementById(targetTabId): 根据获取到的 id 找到对应的选项卡内容元素。
这个实现非常基础，但非常实用，可以作为很多 Web 应用中选项卡功能的起点。