<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tab 切换</title>
<style>
.tabs {
display: flex;
list-style: none;
padding: 0;
margin: 0;
border-bottom: 2px solid #ccc;
}
.tab-item {
padding: 10px 20px;
cursor: pointer;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
transition: background-color 0.3s ease;
}
.tab-item.active {
background-color: #f0f0f0;
border-bottom: 2px solid transparent; /* 避免底部双线 */
}
.tab-content {
padding: 20px;
border: 1px solid #ccc;
border-top: none; /* 避免顶部双线 */
display: none; /* 默认隐藏所有内容 */
}
.tab-content.active {
display: block;
}
</style>
</head>
<body>
<ul class="tabs">
<li class="tab-item active" data-tab="tab1">Tab 1</li>
<li class="tab-item" data-tab="tab2">Tab 2</li>
<li class="tab-item" data-tab="tab3">Tab 3</li>
</ul>
<div class="tab-content active" id="tab1">
<h2>Tab 1 Content</h2>
<p>This is the content of Tab 1.</p>
</div>
<div class="tab-content" id="tab2">
<h2>Tab 2 Content</h2>
<p>This is the content of Tab 2.</p>
</div>
<div class="tab-content" id="tab3">
<h2>Tab 3 Content</h2>
<p>This is the content of Tab 3.</p>
</div>
<script>
const tabItems = document.querySelectorAll('.tab-item');
const tabContents = document.querySelectorAll('.tab-content');
tabItems.forEach(item => {
item.addEventListener('click', () => {
const targetTab = item.dataset.tab;
// 移除所有 tab-item 和 tab-content 的 active class
tabItems.forEach(i => i.classList.remove('active'));
tabContents.forEach(c => c.classList.remove('active'));
// 为当前点击的 tab-item 和对应的 tab-content 添加 active class
item.classList.add('active');
document.getElementById(targetTab).classList.add('active');
});
});
</script>
</body>
</html>
代码解释:
- HTML 结构: 使用无序列表(
ul)创建标签，列表项(li)作为每个标签按钮。每个标签按钮都有一个data-tab属性，用于关联对应的标签内容。标签内容使用div元素，并通过id与data-tab值对应。 - CSS 样式: 设置标签按钮和内容的样式，包括激活状态的样式。
- JavaScript 交互:
- 使用
querySelectorAll获取所有标签按钮和内容元素。 - 遍历标签按钮，为每个按钮添加点击事件监听器。
- 在点击事件处理函数中：
- 获取点击按钮的
data-tab属性值。 - 移除所有标签按钮和内容的
active类，清除之前的激活状态。 - 为当前点击的按钮和对应的标签内容添加
active类，显示对应内容。
- 获取点击按钮的
- 使用
关键点:
- 使用
data-tab属性关联标签按钮和内容，使代码更清晰易维护。 - 使用 JavaScript 动态添加/移除
active类控制标签切换。 - CSS 中使用
transition属性实现平滑的过渡效果。
This example provides a clear and concise solution for implementing tab switching with CSS and JavaScript. It's easy to understand and modify for your specific needs. Remember to adjust the styling and content to match your design.
标签：tab,标签,content,item,切换,Tab,active,CSS From： https://www.cnblogs.com/ai888/p/18580943