js实现tab选项卡切换

下面是一个简单的实现示例：

HTML代码：

<div class="tab">
  <button class="tab-btn active" data-tab="tab1">选项卡1</button>
  <button class="tab-btn" data-tab="tab2">选项卡2</button>
  <button class="tab-btn" data-tab="tab3">选项卡3</button>
</div>

<div class="tab-content" id="tab1">
  <p>这是选项卡1的内容</p>
</div>
<div class="tab-content" id="tab2">
  <p>这是选项卡2的内容</p>
</div>
<div class="tab-content" id="tab3">
  <p>这是选项卡3的内容</p>
</div>

CSS代码：

.tab-btn {
  background-color: #ccc;
  border: none;
  color: #fff;
  padding: 10px;
  cursor: pointer;
}

.active {
  background-color: #f00;
}

.tab-content {
  display: none;
}

JavaScript代码：

// 获取所有选项卡按钮
const tabBtns = document.querySelectorAll(".tab-btn");

// 获取所有选项卡内容
const tabContents = document.querySelectorAll(".tab-content");

// 循环遍历每个选项卡按钮
tabBtns.forEach((btn) => {
  // 添加点击事件监听器
  btn.addEventListener("click", () => {
    // 移除所有选项卡按钮的 active 类
    tabBtns.forEach((btn) => {
      btn.classList.remove("active");
    });
    // 给当前点击的选项卡按钮添加 active 类
    btn.classList.add("active");

    // 隐藏所有选项卡内容
    tabContents.forEach((content) => {
      content.style.display = "none";
    });
    // 显示与点击按钮对应的选项卡内容
    const tabId = btn.getAttribute("data-tab");
    document.getElementById(tabId).style.display = "block";
  });
});

解释一下，首先我们通过 `querySelectorAll` 方法获取到所有选项卡按钮和选项卡内容的元素，然后循环遍历每个选项卡按钮，给它们添加点击事件监听器。当点击某个选项卡按钮时，我们先移除所有选项卡按钮的 `active` 类，再给当前点击的选项卡按钮添加 `active` 类。接下来，我们隐藏所有选项卡内容，然后根据点击按钮的 `data-tab` 属性值，找到与之对应的选项卡内容，将它的 `display` 样式属性设为 `block`，以显示该选项卡内容。