尝试使用一个选项卡更改多个div

<div class="tab">
  <div class="tab-header">
    <div class="tab-item active" onclick="changeTab(0)">Tab 1</div>
    <div class="tab-item" onclick="changeTab(1)">Tab 2</div>
    <div class="tab-item" onclick="changeTab(2)">Tab 3</div>
  </div>
  <div class="tab-content">
    <div class="tab-pane active">Content 1</div>
    <div class="tab-pane">Content 2</div>
    <div class="tab-pane">Content 3</div>
  </div>
</div>

.tab-header {
  display: flex;
}

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

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

.tab-pane {
  display: none;
}

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

function changeTab(index) {
  var tabItems = document.getElementsByClassName('tab-item');
  var tabPanes = document.getElementsByClassName('tab-pane');

  // 移除所有选项卡的active类
  for (var i = 0; i < tabItems.length; i++) {
    tabItems[i].classList.remove('active');
  }

  // 隐藏所有内容div
  for (var i = 0; i < tabPanes.length; i++) {
    tabPanes[i].classList.remove('active');
  }

  // 添加选中选项卡的active类，并显示对应的内容div
  tabItems[index].classList.add('active');
  tabPanes[index].classList.add('active');
}