<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tab 切换效果</title>
<style>
body {
font-family: Arial, sans-serif;
font-size: 16px;
line-height: 1.6;
color: #333;
margin: 0;
padding: 0;
}
.tabs {
display: flex;
justify-content: center;
align-items: center;
background-color: #F2F2F2;
padding: 20px;
}
.tab {
margin-right: 10px;
cursor: pointer;
padding: 10px 20px;
border-radius: 5px;
background-color: #FFF;
border: 1px solid #CCC;
}
.tab.active {
background-color: #007AFF;
color: #FFF;
border-color: #007AFF;
}
.tab-content {
display: none;
padding: 20px;
margin-top: 0px;
background-color: #FFF;
border: 1px solid #CCC;
border-radius: 5px;
}
.tab-content.active {
display: block;
}
</style>
</head>
<body>
<div class="tabs">
<div class="tab active" data-tab="tab1">Tab 1</div>
<div class="tab" data-tab="tab2">Tab 2</div>
<div class="tab" data-tab="tab3">Tab 3</div>
</div>
<div class="tab-content active" data-tab="tab1">
<h2>Tab 1 内容</h2>
<p>这里是 Tab 1 的内容。</p>
</div>
<div class="tab-content" data-tab="tab2">
<h2>Tab 2 内容</h2>
<p>这里是 Tab 2 的内容。</p>
<p>这里是 Tab 2 的内容。</p>
</div>
<div class="tab-content" data-tab="tab3">
<h2>Tab 3 内容</h2>
<p>这里是 Tab 3 的内容。</p>
<p>这里是 Tab 3 的内容。</p>
<p>这里是 Tab 3 的内容。</p>
</div>
<script>
const tabs = document.querySelectorAll('.tab');
const tabContents = document.querySelectorAll('.tab-content');
tabs.forEach(tab => {
tab.addEventListener('click', () => {
const activeTab = document.querySelector('.tab.active');
const activeTabContent = document.querySelector('.tab-content.active');
activeTab.classList.remove('active');
activeTabContent.classList.remove('active');
tab.classList.add('active');
const tabContent = document.querySelector(`.tab-content[data-tab=${tab.dataset.tab}]`);
tabContent.classList.add('active');
});
});
</script>
</body>
</html>
简单的HTML + CSS + JavaScript tab 切换效果示例
最新推荐文章于 2024-04-05 23:52:16 发布