css 制作tab页

使用纯CSS制作Tab页的方法

通过HTML和CSS可以实现无需JavaScript的Tab页切换效果。以下是几种常见的实现方式：

方法一：使用radio input和label

HTML结构：

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

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

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

CSS样式：

.tabs {
  display: flex;
  flex-direction: column;
}
.tabs input[type="radio"] {
  display: none;
}
.tabs label {
  padding: 10px 20px;
  background: #eee;
  cursor: pointer;
  order: -1;
  margin-right: 5px;
}
.tabs input[type="radio"]:checked + label {
  background: #ddd;
  font-weight: bold;
}
.tabs .content {
  display: none;
  padding: 20px;
}
.tabs input[type="radio"]:checked + label + .content {
  display: block;
}

方法二：使用锚点和:target伪类

HTML结构：

<div class="tab-container">
  <nav class="tab-nav">
    <a href="#tab1">Tab 1</a>
    <a href="#tab2">Tab 2</a>
    <a href="#tab3">Tab 3</a>
  </nav>

  <div id="tab1" class="tab-content">Content 1</div>
  <div id="tab2" class="tab-content">Content 2</div>
  <div id="tab3" class="tab-content">Content 3</div>
</div>

CSS样式：

.tab-nav {
  display: flex;
  margin-bottom: 10px;
}
.tab-nav a {
  padding: 10px 20px;
  background: #eee;
  text-decoration: none;
  color: #333;
  margin-right: 5px;
}
.tab-nav a:hover {
  background: #ddd;
}
.tab-content {
  display: none;
  padding: 20px;
  border: 1px solid #ddd;
}
.tab-content:target {
  display: block;
}

方法三：使用checkbox和相邻兄弟选择器

HTML结构：

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

  <label class="tab-label" for="tab2">Tab 2</label>
  <input type="checkbox" id="tab2" class="tab-switch">
  <div class="tab-content">Content 2</div>

  <label class="tab-label" for="tab3">Tab 3</label>
  <input type="checkbox" id="tab3" class="tab-switch">
  <div class="tab-content">Content 3</div>
</div>

CSS样式：

.tabs {
  position: relative;
}
.tab-switch {
  display: none;
}
.tab-label {
  display: inline-block;
  padding: 10px 20px;
  background: #eee;
  cursor: pointer;
  margin-right: 5px;
}
.tab-content {
  display: none;
  position: absolute;
  left: 0;
  padding: 20px;
  border: 1px solid #ddd;
  width: 100%;
  box-sizing: border-box;
}
.tab-switch:checked ~ .tab-content {
  display: block;
}
.tab-switch:checked + .tab-label {
  background: #ddd;
  font-weight: bold;
}

样式优化建议

1. 添加过渡效果使切换更平滑：

   .tab-content {
   transition: opacity 0.3s ease;
   opacity: 0;
   height: 0;
   overflow: hidden;
   }
   .tab-content:target, 
   .tabs input[type="radio"]:checked + label + .content,
   .tab-switch:checked ~ .tab-content {
   opacity: 1;
   height: auto;
   }

2. 添加活动标签指示器：

   .tab-nav a.active {
   border-bottom: 3px solid #4285f4;
   }

3. 响应式设计：

   @media (max-width: 600px) {
   .tab-nav {
    flex-direction: column;
   }
   .tab-nav a {
    margin-right: 0;
    margin-bottom: 5px;
   }
   }

这些方法都利用了CSS的选择器和伪类来实现Tab页切换，无需JavaScript。根据项目需求选择最适合的实现方式，radio input方法适合简单的Tab切换，:target方法适合需要URL哈希变化的场景，checkbox方法则提供了更灵活的布局选项。