使用css写一个tab切换

可以使用CSS编写一个基本的Tab切换效果，以下是一个简单的示例代码：

HTML代码：

<div class="tab">
  <button class="tablinks" onclick="openTab(event, 'tab1')">标签1</button>
  <button class="tablinks" onclick="openTab(event, 'tab2')">标签2</button>
  <button class="tablinks" onclick="openTab(event, 'tab3')">标签3</button>
</div>

<div id="tab1" class="tabcontent">
  <h3>标签1</h3>
  <p>这里是标签1的内容。</p>
</div>

<div id="tab2" class="tabcontent">
  <h3>标签2</h3>
  <p>这里是标签2的内容。</p>
</div>

<div id="tab3" class="tabcontent">
  <h3>标签3</h3>
  <p>这里是标签3的内容。</p>
</div>

CSS代码：

/* 隐藏所有标签内容 */
.tabcontent {
  display: none;
}

/* 标签按钮样式 */
.tab button {
  background-color: #fff;
  border: none;
  color: #000;
  cursor: pointer;
  padding: 8px 16px;
}

/* 激活标签按钮样式 */
.tab button.active {
  background-color: #ccc;
}

/* 显示当前标签内容 */
.tabcontent.show {
  display: block;
}

JavaScript代码：

// 默认打开第一个标签
document.getElementById("tab1").classList.add("show");

function openTab(event, tabName) {
  // 隐藏所有标签内容
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].classList.remove("show");
  }

  // 取消所有标签按钮激活状态
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].classList.remove("active");
  }

  // 显示当前标签内容
  document.getElementById(tabName).classList.add("show");

  // 激活当前标签按钮
  event.currentTarget.classList.add("active");
}

在此示例中，我们首先定义了一些HTML元素，其中包括用于切换标签的按钮以及每个标签对应的内容。然后，我们使用CSS来定义标签按钮和标签内容的样式，并使用JavaScript来处理标签切换逻辑。最后，当用户单击标签按钮时，我们调用openTab函数来显示当前标签内容并激活当前标签按钮。