js 切换tab

在 JavaScript 中切换 tab 可以通过以下步骤实现：

1. 获取所有 tab 的元素，并将它们存储在一个数组中；
2. 给每个 tab 绑定一个点击事件，当点击时切换 tab 的状态；
3. 隐藏所有 tab 的内容；
4. 显示当前被激活的 tab 对应的内容。

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

HTML：

<div class="tabs">
  <div class="tab active" data-tab="tab1">Tab 1</div>
  <div class="tab" data-tab="tab2">Tab 2</div>
  <div class="tab" data-tab="tab3">Tab 3</div>
</div>

<div class="tab-content" data-tab="tab1">Tab 1 Content</div>
<div class="tab-content" data-tab="tab2">Tab 2 Content</div>
<div class="tab-content" data-tab="tab3">Tab 3 Content</div>

CSS：

.tabs {
  display: flex;
}

.tab {
  cursor: pointer;
  padding: 10px;
  border: 1px solid #ccc;
  border-bottom: none;
  margin-right: 10px;
}

.tab.active {
  background-color: #ccc;
}

.tab-content {
  display: none;
  border: 1px solid #ccc;
  padding: 10px;
}

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

JavaScript：

const tabs = document.querySelectorAll('.tab');
const tabContents = document.querySelectorAll('.tab-content');

tabs.forEach(tab => {
  tab.addEventListener('click', () => {
    // 隐藏所有 tab 的内容
    tabContents.forEach(content => content.classList.remove('active'));

    // 取消所有 tab 的激活状态
    tabs.forEach(tab => tab.classList.remove('active'));

    // 激活当前选中的 tab
    tab.classList.add('active');

    // 显示当前选中 tab 对应的内容
    const tabName = tab.getAttribute('data-tab');
    const tabContent = document.querySelector(`[data-tab="${tabName}"]`);
    tabContent.classList.add('active');
  });
});