当前位置：首页 > CSS

纯css制作tab菜单

2026-02-12 13:29:49CSS

纯CSS制作Tab菜单的方法

方法一：使用`:target`伪类

通过CSS的:target伪类选择器实现Tab切换效果，无需JavaScript。

HTML结构：

<div class="tabs">
  <div class="tab-links">
    <a href="#tab1">Tab 1</a>
    <a href="#tab2">Tab 2</a>
    <a href="#tab3">Tab 3</a>
  </div>
  <div class="tab-content">
    <div id="tab1">Content 1</div>
    <div id="tab2">Content 2</div>
    <div id="tab3">Content 3</div>
  </div>
</div>

CSS样式：

.tab-content > div {
  display: none;
  padding: 20px;
  border: 1px solid #ddd;
}

.tab-content > div:target {
  display: block;
}

.tab-links a {
  display: inline-block;
  padding: 10px 20px;
  background: #f1f1f1;
  text-decoration: none;
  color: #333;
}

.tab-links a:hover {
  background: #ddd;
}

方法二：使用radio input和`:checked`伪类

通过隐藏的radio input和:checked伪类实现更稳定的Tab切换。

HTML结构：

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

  <input type="radio" name="tabs" id="tab2">
  <label for="tab2">Tab 2</label>

  <input type="radio" name="tabs" id="tab3">
  <label for="tab3">Tab 3</label>

  <div class="tab-content">
    <div class="tab-pane">Content 1</div>
    <div class="tab-pane">Content 2</div>
    <div class="tab-pane">Content 3</div>
  </div>
</div>

CSS样式：

input[type="radio"] {
  display: none;
}

label {
  display: inline-block;
  padding: 10px 20px;
  background: #f1f1f1;
  cursor: pointer;
}

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

#tab1:checked ~ .tab-content .tab-pane:nth-child(1),
#tab2:checked ~ .tab-content .tab-pane:nth-child(2),
#tab3:checked ~ .tab-content .tab-pane:nth-child(3) {
  display: block;
}

input[type="radio"]:checked + label {
  background: #ddd;
}

方法三：使用flexbox布局

结合flexbox布局创建响应式Tab菜单。

HTML结构：

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

CSS样式：

.tabs {
  display: flex;
  flex-direction: column;
}

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

.tab-link {
  padding: 10px 20px;
  cursor: pointer;
  background: #f1f1f1;
}

.tab-link.active {
  background: #ddd;
  border-bottom: 2px solid #333;
}

.tab-pane {
  display: none;
  padding: 20px;
}

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