如何用HTML＋CSS编写灵活的Tab页，offer收割机
warning:
这篇文章距离上次修改已过442天，其中的内容可能已经有所变动。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexible Tabs (1)</title>
<style>
.tabs {
display: flex;
justify-content: space-between;
background-color: #f2f2f2;
padding: 10px;
}
.tab {
padding: 10px;
cursor: pointer;
user-select: none;
}
.tab.active {
border-bottom: 2px solid #333;
}
.content {
padding: 20px;
border: 1px solid #ddd;
border-top: none;
}
</style>
</head>
<body>
<div class="tabs">
<div class="tab active">Tab 1</div>
<div class="tab">Tab 2</div>
<div class="tab">Tab 3</div>
</div>
<div class="content">Content for Tab 1</div>
<script>
document.querySelectorAll('.tab').forEach(tab => {
tab.addEventListener('click', () => {
// Remove active class from all tabs
document.querySelectorAll('.tab').forEach(tab => tab.classList.remove('active'));
// Add active class to the clicked tab
tab.classList.add('active');
// Get the index of the clicked tab
const index = [...document.querySelectorAll('.tab')].indexOf(tab);
// Hide all content divs
document.querySelectorAll('.content').forEach(content => content.style.display = 'none');
// Show the content div corresponding to the active tab
document.querySelectorAll('.content')[index].style.display = 'block';
});
});
</script>
</body>
</html>这段代码使用了Flexbox布局让标签水平分布，并通过JavaScript处理标签的点击事件，显示对应的内容区域。这是一个简单的标签页实现，适合作为学习如何构建更复杂标签页系统的起点。
评论已关闭