css制作tab

CSS制作Tab的方法

HTML结构

<div class="tab-container">
  <div class="tabs">
    <button class="tab-button active" data-tab="tab1">Tab 1</button>
    <button class="tab-button" data-tab="tab2">Tab 2</button>
    <button class="tab-button" data-tab="tab3">Tab 3</button>
  </div>
  <div class="tab-content">
    <div id="tab1" class="tab-pane active">Content 1</div>
    <div id="tab2" class="tab-pane">Content 2</div>
    <div id="tab3" class="tab-pane">Content 3</div>
  </div>
</div>

CSS样式

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

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

.tab-button {
  padding: 10px 20px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  transition: all 0.3s;
}

.tab-button.active {
  border-bottom: 2px solid #007bff;
  color: #007bff;
}

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

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

JavaScript交互

document.querySelectorAll('.tab-button').forEach(button => {
  button.addEventListener('click', () => {
    // 移除所有按钮和内容的active类
    document.querySelectorAll('.tab-button').forEach(btn => {
      btn.classList.remove('active');
    });
    document.querySelectorAll('.tab-pane').forEach(pane => {
      pane.classList.remove('active');
    });

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

纯CSS实现方法

HTML结构

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

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

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

CSS样式

.tab-container {
  display: flex;
  flex-wrap: wrap;
}

.tab-container input[type="radio"] {
  display: none;
}

.tab-container label {
  padding: 10px 20px;
  cursor: pointer;
  background: #f1f1f1;
  border: 1px solid #ddd;
  margin-right: 5px;
}

.tab-container input[type="radio"]:checked + label {
  background: #fff;
  border-bottom: 1px solid #fff;
}

.tab-content {
  display: none;
  width: 100%;
  padding: 20px;
  border: 1px solid #ddd;
  order: 1;
}

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

响应式Tab设计

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

  .tab-button {
    width: 100%;
    text-align: left;
    border-bottom: 1px solid #eee;
  }

  .tab-button.active {
    border-left: 2px solid #007bff;
    border-bottom: 1px solid #eee;
  }
}

动画效果增强

.tab-pane {
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.3s ease;
}

.tab-pane.active {
  opacity: 1;
  transform: translateY(0);
}