css 制作tab页

使用HTML和CSS制作Tab页

通过HTML结构和CSS样式可以轻松实现Tab页效果，以下是两种常见方法：

方法一：纯CSS实现Tab切换

HTML结构：

<div class="tabs">
  <input type="radio" name="tabs" id="tab1" checked>
  <label for="tab1">Tab 1</label>
  <div class="tab-content">内容1</div>

  <input type="radio" name="tabs" id="tab2">
  <label for="tab2">Tab 2</label>
  <div class="tab-content">内容2</div>

  <input type="radio" name="tabs" id="tab3">
  <label for="tab3">Tab 3</label>
  <div class="tab-content">内容3</div>
</div>

CSS样式：

.tabs {
  display: flex;
  flex-wrap: wrap;
  position: relative;
}

.tabs input[type="radio"] {
  position: absolute;
  opacity: 0;
}

.tabs label {
  padding: 10px 20px;
  cursor: pointer;
  background: #eee;
  margin-right: 5px;
  border-radius: 5px 5px 0 0;
}

.tabs input[type="radio"]:checked + label {
  background: #4CAF50;
  color: white;
}

.tab-content {
  width: 100%;
  padding: 20px;
  background: white;
  display: none;
  order: 1;
}

.tabs input[type="radio"]:checked + label + .tab-content {
  display: block;
}

方法二：使用Flex布局的Tab

HTML结构：

<div class="tab-container">
  <div class="tab-header">
    <div class="tab-btn active" data-tab="tab1">Tab 1</div>
    <div class="tab-btn" data-tab="tab2">Tab 2</div>
    <div class="tab-btn" data-tab="tab3">Tab 3</div>
  </div>
  <div class="tab-content active" id="tab1">内容1</div>
  <div class="tab-content" id="tab2">内容2</div>
  <div class="tab-content" id="tab3">内容3</div>
</div>

CSS样式：

.tab-container {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}

.tab-header {
  display: flex;
  border-bottom: 1px solid #ddd;
}

.tab-btn {
  padding: 10px 20px;
  cursor: pointer;
  background: #f1f1f1;
  margin-right: 5px;
  border-radius: 5px 5px 0 0;
}

.tab-btn.active {
  background: #4CAF50;
  color: white;
}

.tab-content {
  display: none;
  padding: 20px;
  background: white;
  border: 1px solid #ddd;
  border-top: none;
}

.tab-content.active {
  display: block;
}

添加交互效果的JavaScript

如果需要更动态的效果，可以添加简单JavaScript：

document.querySelectorAll('.tab-btn').forEach(btn => {
  btn.addEventListener('click', () => {
    // 移除所有active类
    document.querySelectorAll('.tab-btn, .tab-content').forEach(el => {
      el.classList.remove('active');
    });

    // 为当前按钮和对应内容添加active类
    btn.classList.add('active');
    const tabId = btn.getAttribute('data-tab');
    document.getElementById(tabId).classList.add('active');
  });
});

响应式设计考虑

为适应不同屏幕尺寸，可以添加媒体查询：

@media (max-width: 600px) {
  .tab-header {
    flex-direction: column;
  }

  .tab-btn {
    margin-right: 0;
    margin-bottom: 5px;
    border-radius: 5px;
  }
}

这些方法提供了从简单到复杂的Tab页实现方案，可根据项目需求选择适合的方式。纯CSS方案适合简单场景，而JavaScript增强版本则提供更多交互可能性。