根据选项卡更改文本可见性并设置选项卡的背景色

<div class="tab">
  <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-item active">
    <h3>选项卡1内容</h3>
    <p>这是选项卡1的内容。</p>
  </div>
  <div class="tab-item">
    <h3>选项卡2内容</h3>
    <p>这是选项卡2的内容。</p>
  </div>
  <div class="tab-item">
    <h3>选项卡3内容</h3>
    <p>这是选项卡3的内容。</p>
  </div>
</div>

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

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

.tab-item {
  display: none;
}

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

function changeTab(tabIndex) {
  var tabButtons = document.getElementsByClassName("tab-button");
  var tabItems = document.getElementsByClassName("tab-item");

  for (var i = 0; i < tabButtons.length; i++) {
    tabButtons[i].classList.remove("active");
    tabItems[i].classList.remove("active");
  }

  tabButtons[tabIndex].classList.add("active");
  tabItems[tabIndex].classList.add("active");
}