按钮更改选项卡

<div class="tab-container">
  <button class="tab-button active" onclick="changeTab(0)">选项卡1</button>
  <button class="tab-button" onclick="changeTab(1)">选项卡2</button>
  <button class="tab-button" onclick="changeTab(2)">选项卡3</button>
</div>

<div class="tab-content">
  <div class="tab-pane active">选项卡1的内容</div>
  <div class="tab-pane">选项卡2的内容</div>
  <div class="tab-pane">选项卡3的内容</div>
</div>

.tab-container {
  display: flex;
}

.tab-button {
  padding: 10px 20px;
  background-color: #eee;
  border: none;
  cursor: pointer;
}

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

.tab-content {
  margin-top: 10px;
}

.tab-pane {
  display: none;
}

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

function changeTab(index) {
  // 隐藏所有选项卡内容
  var tabContent = document.getElementsByClassName('tab-pane');
  for (var i = 0; i < tabContent.length; i++) {
    tabContent[i].classList.remove('active');
  }
  
  // 显示当前选项卡内容
  tabContent[index].classList.add('active');
  
  // 切换按钮样式
  var tabButtons = document.getElementsByClassName('tab-button');
  for (var i = 0; i < tabButtons.length; i++) {
    tabButtons[i].classList.remove('active');
  }
  tabButtons[index].classList.add('active');
}