纯css制作tab菜单

纯CSS制作Tab菜单的方法

使用radio input控制切换

通过<input type="radio">和<label>元素配合实现无JavaScript的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">内容1</div>
  <div class="tab-content" id="content2">内容2</div>
  <div class="tab-content" id="content3">内容3</div>
</div>

CSS样式：

.tabs {
  position: relative;
}
.tab-content {
  display: none;
  padding: 20px;
  border: 1px solid #ddd;
}
input[type="radio"] {
  position: absolute;
  opacity: 0;
}
label {
  display: inline-block;
  padding: 10px 20px;
  cursor: pointer;
  background: #f1f1f1;
}
#tab1:checked ~ #content1,
#tab2:checked ~ #content2,
#tab3:checked ~ #content3 {
  display: block;
}
#tab1:checked + label,
#tab2:checked + label,
#tab3:checked + label {
  background: #ddd;
}

使用:target伪类实现

利用锚点链接和CSS的:target选择器实现Tab切换。

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-panel">内容1</div>
  <div id="tab2" class="tab-panel">内容2</div>
  <div id="tab3" class="tab-panel">内容3</div>
</div>

CSS样式：

.tab-panel {
  display: none;
  padding: 20px;
  border: 1px solid #ccc;
}
.tab-panel:target {
  display: block;
}
.tab-nav a {
  display: inline-block;
  padding: 10px 15px;
  background: #f5f5f5;
  text-decoration: none;
}
.tab-nav a:hover {
  background: #ddd;
}

使用checkbox hack实现多级菜单

通过checkbox的checked状态控制复杂Tab菜单的显示/隐藏。

HTML结构：

<div class="multi-tab">
  <input type="checkbox" id="tab-toggle">
  <label for="tab-toggle">主菜单</label>

  <div class="sub-tabs">
    <input type="radio" name="sub-tab" id="sub-tab1">
    <label for="sub-tab1">子菜单1</label>

    <input type="radio" name="sub-tab" id="sub-tab2">
    <label for="sub-tab2">子菜单2</label>

    <div class="sub-content" id="sub-content1">子内容1</div>
    <div class="sub-content" id="sub-content2">子内容2</div>
  </div>
</div>

CSS样式：

.multi-tab {
  position: relative;
}
#tab-toggle {
  display: none;
}
#tab-toggle:checked + label + .sub-tabs {
  display: block;
}
.sub-tabs {
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
}
.sub-content {
  display: none;
}
#sub-tab1:checked ~ #sub-content1,
#sub-tab2:checked ~ #sub-content2 {
  display: block;
}

垂直Tab菜单实现

通过调整布局实现垂直方向的Tab菜单。

HTML结构：

<div class="vertical-tabs">
  <input type="radio" name="vtab" id="vtab1" checked>
  <label for="vtab1">垂直Tab1</label>

  <input type="radio" name="vtab" id="vtab2">
  <label for="vtab2">垂直Tab2</label>

  <div class="vtab-content" id="vcontent1">垂直内容1</div>
  <div class="vtab-content" id="vcontent2">垂直内容2</div>
</div>

CSS样式：

.vertical-tabs {
  display: flex;
}
.vertical-tabs label {
  display: block;
  padding: 10px;
  background: #eee;
  border-right: 1px solid #ddd;
}
.vtab-content {
  display: none;
  padding: 15px;
  flex: 1;
}
#vtab1:checked ~ #vcontent1,
#vtab2:checked ~ #vcontent2 {
  display: block;
}

这些方法都无需JavaScript，仅通过CSS选择器和HTML结构实现Tab菜单功能。可以根据项目需求选择最适合的实现方式，并通过CSS进一步美化样式。