高级玩家
- 贡献度
- 0
- 金元
- 4246
- 积分
- 425
- 精华
- 0
- 注册时间
- 2011-10-28
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>选项卡切换与高亮示例</title>
<style>
/* 样式设置 */
.tabs {
display: flex;
cursor: pointer;
justify-content: center;
width: 100%;
}
.tab {
padding: 10px;
border: 1px solid #ccc;
margin-right: 5px;
background-color: #f0f0f0;
transition: background-color 0.3s, color 0.3s; /* 添加过渡效果 */
margin: -2px;
}
.tab-content {
display: none;
padding: 80px;
border: 1px solid #ccc;
border-top: none;
justify-content: center;
background-color: aqua;
width: 100%;
margin: auto;
}
.active {
background-color: #4CAF50; /* 高亮颜色 */
color: white; /* 文字颜色 */
}
.content-active {
display: block;
}
</style>
</head>
<body>
<!-- HTML结构 -->
<div class="tabs">
<div class="tab" data-tab="1">选项卡1</div><div class="tab" data-tab="2">选项卡2</div><div class="tab" data-tab="3">选项卡3</div>
</div>
<div id="tab-1" class="tab-content">这是选项卡1的内容。</div>
<div id="tab-2" class="tab-content">这是选项卡2的内容。</div>
<div id="tab-3" class="tab-content">这是选项卡3的内容。</div>
<!-- JavaScript逻辑 -->
<script>
// 获取所有选项卡元素
const tabs = document.querySelectorAll('.tab');
// 获取所有内容区域元素
const contents = document.querySelectorAll('.tab-content');
// 为每个选项卡添加点击事件监听器
tabs.forEach(tab => {
tab.addEventListener('click', () => {
// 移除所有选项卡和内容区域的active和content-active类
tabs.forEach(t => t.classList.remove('active'));
contents.forEach(c => c.classList.remove('content-active'));
// 为当前点击的选项卡添加active类
tab.classList.add('active');
// 获取当前选项卡关联的内容区域的ID，并显示该内容区域
const tabId = `tab-${tab.getAttribute('data-tab')}`;
document.getElementById(tabId).classList.add('content-active');
});
});
</script>
</body>
</html>
|
|
[复制链接]
发表于 2024-12-29 16:13
