只用css写tab切换

可以使用纯CSS实现基本的Tab切换效果，具体实现步骤如下：

1. 使用HTML标签作为容器，例如div或ul，每个标签页作为其子元素。
2. 为每个标签页创建一个radio或checkbox作为切换按钮，将其隐藏，使用label标签包裹按钮，并设置其样式，使其看起来像一个标签按钮。
3. 使用CSS选择器和伪类来控制标签页和按钮的显示和隐藏，例如:checked选择器和~兄弟选择器。
4. 使用CSS设置标签页和按钮的样式，例如高亮选中的标签页等。

以下是一个简单的示例代码：

HTML:

<div class="tab-container">
  <input type="radio" id="tab1" name="tabs" checked>
  <label for="tab1">Tab 1</label>
  
  <input type="radio" id="tab2" name="tabs">
  <label for="tab2">Tab 2</label>
  
  <input type="radio" id="tab3" name="tabs">
  <label for="tab3">Tab 3</label>
  
  <div id="tab-content1" class="tab-content">
    Content for Tab 1
  </div>
  
  <div id="tab-content2" class="tab-content">
    Content for Tab 2
  </div>
  
  <div id="tab-content3" class="tab-content">
    Content for Tab 3
  </div>
</div>

CSS:

.tab-container {
  display: flex;
  flex-direction: column;
}

.tab-content {
  display: none;
  padding: 10px;
}

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

label {
  background-color: #f1f1f1;
  border: none;
  color: black;
  padding: 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin-bottom: 10px;
  cursor: pointer;
}

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

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

注意：以上代码只是一个简单的示例，实际项目中可能需要更多的样式和功能来满足需求。