js原生选项卡

<div class="tabs">
  <button class="tab-button active" data-tab="tab1">Tab 1</button>
  <button class="tab-button" data-tab="tab2">Tab 2</button>
  <div class="tab-content active" id="tab1">Content for Tab 1</div>
  <div class="tab-content" id="tab2">Content for Tab 2</div>
</div>

.tabs {
  width: 100%;
}

.tab-button {
  padding: 10px;
  cursor: pointer;
}

.tab-button.active {
  background-color: #ddd;
}

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

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

document.querySelectorAll('.tab-button').forEach(button => {
  button.addEventListener('click', () => {
    const targetTab = button.getAttribute('data-tab');

    // 移除所有按钮和内容的激活状态
    document.querySelectorAll('.tab-button, .tab-content').forEach(el => el.classList.remove('active'));

    // 激活当前按钮和对应的内容
    button.classList.add('active');
    document.getElementById(targetTab).classList.add('active');
  });
});