标签一
标签二
标签三
内容一：选项卡基础功能演示
内容二：JavaScript交互逻辑实现
内容三：Web前端实战案例应用
```
三、CSS样式美化
设置容器布局、按钮样式和内容显示规则：
```css
.tab-container { width: 500px; margin: 20px auto; }
.tab-buttons { display: flex; border-bottom: 1px solid #ddd; }
.tab-btn {
padding: 10px 20px; cursor: pointer;
background: #f5f5f5; border: none;
}
.tab-btn.active {
background: #fff; border-bottom: 2px solid #4CAF50; color: #4CAF50;
}
.tab-contents { padding: 20px; }
.tab-content { display: none; }
.tab-content.active { display: block; }
```
四、JavaScript交互实现
通过事件监听和DOM操作实现标签切换逻辑：
```javascript
// 获取元素
const tabBtns = document.querySelectorAll('.tab-btn');
const tabContents = document.querySelectorAll('.tab-content');
// 遍历按钮添加点击事件
tabBtns.forEach(btn => {
btn.addEventListener('click', () => {
// 移除所有按钮活跃状态
tabBtns.forEach(b => b.classList.remove('active'));
// 给当前点击按钮添加活跃状态
btn.classList.add('active');
// 获取对应内容ID
const tabId = btn.getAttribute('data-tab');
// 隐藏所有内容
tabContents.forEach(content => content.classList.remove('active'));
// 显示对应内容
document.getElementById(tabId).classList.add('active');
});
});
``` 以上代码实现了选项卡核心功能：通过`data-tab`属性关联标签与内容，点击按钮时切换`active`类控制显示状态。掌握此案例后，可扩展动画效果、动态数据加载等进阶功能。
0
0
延伸阅读：
上一篇：p眼睛真的能这么好看吗？
下一篇：返回列表
×