当前位置：首页 > news >正文

js选项卡

news 2024/11/1 11:14:39

下面是一个使用双重 for 循环来创建选项卡功能的示例。我们将依然使用 HTML、CSS 和 JavaScript，但在 JavaScript 中使用双重循环来处理选项卡。

这个选项卡功能的整体思路可以分为几个步骤：

HTML 结构：

创建一个包含选项卡按钮的容器（div.tabs），每个按钮使用 button 元素，并通过 data-tab 属性标识对应的内容区域。

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>双重循环选项卡示例</title><link rel="stylesheet" href="styles.css">
</head>
<body><div class="tabs"><button class="tab-button active" data-tab="tab1">选项卡 1</button><button class="tab-button" data-tab="tab2">选项卡 2</button><button class="tab-button" data-tab="tab3">选项卡 3</button></div><div class="tab-content"><div class="tab active" id="tab1">内容 1</div><div class="tab" id="tab2">内容 2</div><div class="tab" id="tab3">内容 3</div></div><script src="script.js"></script>
</body>
</html>

CSS 样式：

定义样式，使选项卡按钮在选中和未选中状态下的样式不同，例如设置背景颜色和文本颜色。设置内容区域的样式，确保只有当前选中的内容显示，而其他内容隐藏。
```
body {font-family: Arial, sans-serif;
}.tabs {display: flex;
}.tab-button {padding: 10px 20px;cursor: pointer;border: none;background: #f0f0f0;margin-right: 5px;transition: background 0.3s;
}.tab-button.active {background: #007bff;color: white;
}.tab-content {border: 1px solid #ddd;padding: 20px;margin-top: 10px;
}.tab {display: none;
}.tab.active {display: block;
}
```
JavaScript 功能：使用 document.addEventListener 监听 DOMContentLoaded 事件，确保 DOM 完全加载后再执行脚本。
- 选择所有按钮和内容区域，使用 querySelectorAll 获取它们的 NodeList。
- 为每个按钮添加点击事件监听器，处理用户的点击操作。
- 在事件处理函数中，首先通过一个循环移除所有按钮和内容的 active 类，以隐藏所有内容和重置按钮状态。
- 然后，添加 active 类到被点击的按钮和相应的内容区域，以显示当前选中的内容。

document.addEventListener('DOMContentLoaded', function() {const tabButtons = document.querySelectorAll('.tab-button');const tabs = document.querySelectorAll('.tab');// 使用双重循环来管理选项卡for (let i = 0; i < tabButtons.length; i++) {tabButtons[i].addEventListener('click', function() {// 第一个循环：移除所有按钮的 active 类for (let j = 0; j < tabButtons.length; j++) {tabButtons[j].classList.remove('active');tabs[j].classList.remove('active'); // 移除所有选项卡的 active 类}// 第二个循环：添加 active 类到当前按钮和对应的选项卡tabButtons[i].classList.add('active');tabs[i].classList.add('active');});}
});

这种结构使得代码逻辑清晰，维护简单，同时通过双重循环实现了对多个选项卡的动态管理。用户体验上，当用户点击不同的选项卡时，界面能够快速响应并切换到相应的内容。

查看全文

http://www.mrgr.cn/news/63138.html