css 实现多标签栏切换

CSS实现多标签栏切换的方法有很多，可以使用JavaScript，也可以使用纯CSS。本文将介绍一种使用CSS实现多标签栏切换的方法。

首先，我们需要定义一个包含所有标签的容器，以及每个标签对应的内容区域。在CSS中，我们可以使用display: none;将标签对应的内容区域隐藏起来。

<div class="tab-container">
  <div class="tab">标签1</div>
  <div class="tab">标签2</div>
  <div class="tab">标签3</div>
  
  <div class="tab-content">
    内容1
  </div>
  <div class="tab-content">
    内容2
  </div>
  <div class="tab-content">
    内容3
  </div>
</div>

接下来，我们需要为每个标签添加一个选中状态，以及相应的样式。我们可以使用:hover伪类和.active类来实现。

.tab:hover,.active {
  background-color: #fff;
  color: #000;
  border-bottom: 2px solid #000;
}

.active + .tab-content {
  display: block;
}

现在，我们已经实现了多标签栏切换的功能。当用户点击标签时，我们可以使用JavaScript将对应的内容区域显示出来。

const tabs = document.querySelectorAll(".tab");
const contents = document.querySelectorAll(".tab-content");

tabs.forEach((tab,index) => {
  tab.addEventListener("click",() => {
    tabs.forEach((tab) => tab.classList.remove("active"));
    contents.forEach((content) => content.classList.remove("active"));
    
    tab.classList.add("active");
    contents[index].classList.add("active");
  });
});

以上就是使用CSS实现多标签栏切换的方法，希望对大家有所帮助。