纯css制作tab菜单

2026-01-15 12:05:34CSS

纯CSS制作Tab菜单的方法

使用radio input控制Tab切换

通过<input type="radio">和<label>元素配合:checked伪类实现Tab切换效果。

HTML结构：

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

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

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

  <div class="tab-content" id="content1">Content 1</div>
  <div class="tab-content" id="content2">Content 2</div>
  <div class="tab-content" id="content3">Content 3</div>
</div>

CSS样式：

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

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

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

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

#tab1:checked ~ #content1,
#tab2:checked ~ #content2,
#tab3:checked ~ #content3 {
  display: block;
}

使用锚点和:target伪类

利用URL片段标识符和:target选择器实现Tab切换。

HTML结构：

<div class="tab-menu">
  <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>

CSS样式：

.tab-content > div {
  display: none;
}

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

使用CSS Grid布局

结合CSS Grid和:checked状态创建更复杂的Tab布局。

HTML结构：

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

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

  <div class="tab-panel" id="panel-1">Panel 1 content</div>
  <div class="tab-panel" id="panel-2">Panel 2 content</div>
</div>

CSS样式：

.tab-container {
  display: grid;
  grid-template-areas:
    "tab1 tab2"
    "panel panel";
}

#tab-1:checked ~ [for="tab-1"],
#tab-2:checked ~ [for="tab-2"] {
  background: #fff;
  border-bottom: 2px solid #333;
}

.tab-panel {
  grid-area: panel;
  display: none;
}

#tab-1:checked ~ #panel-1,
#tab-2:checked ~ #panel-2 {
  display: block;
}

添加过渡动画效果

为Tab切换添加平滑的过渡效果。

CSS补充：

.tab-content {
  opacity: 0;
  height: 0;
  overflow: hidden;
  transition: opacity 0.3s ease, height 0.3s ease;
}

input[type="radio"]:checked ~ .tab-content {
  opacity: 1;
  height: auto;
}

这些方法都无需JavaScript，完全依靠CSS实现Tab菜单功能。可以根据项目需求选择最适合的实现方式，并通过CSS进一步自定义样式和交互效果。

纯css制作tab菜单