CN1: 更改选项卡中内容的背景颜色

要更改选项卡中内容的背景颜色，可以使用CSS样式来实现。以下是一种解决方法的示例代码：

HTML代码：

<div class="tab">
  <button class="tablinks" onclick="openTab(event, 'tab1')">选项卡1</button>
  <button class="tablinks" onclick="openTab(event, 'tab2')">选项卡2</button>
  <button class="tablinks" onclick="openTab(event, 'tab3')">选项卡3</button>
</div>

<div id="tab1" class="tabcontent">
  <h3>选项卡1 内容</h3>
  <p>这是选项卡1的内容。</p>
</div>

<div id="tab2" class="tabcontent">
  <h3>选项卡2 内容</h3>
  <p>这是选项卡2的内容。</p>
</div>

<div id="tab3" class="tabcontent">
  <h3>选项卡3 内容</h3>
  <p>这是选项卡3的内容。</p>
</div>

CSS代码：

/* 默认隐藏所有选项卡内容 */
.tabcontent {
  display: none;
}

/* 默认激活第一个选项卡 */
.tablinks:first-child {
  background-color: #ccc;
}

/* 当选项卡被点击时显示对应内容，并更改背景颜色 */
.tablinks.active {
  background-color: #f1f1f1;
}

/* 鼠标悬停在选项卡上时更改背景颜色 */
.tablinks:hover {
  background-color: #ddd;
}

JavaScript代码：

// 打开选项卡时的操作
function openTab(event, tabId) {
  // 隐藏所有选项卡内容
  var tabcontent = document.getElementsByClassName("tabcontent");
  for (var i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }

  // 移除所有选项卡激活状态
  var tablinks = document.getElementsByClassName("tablinks");
  for (var i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }

  // 显示当前选项卡内容，并添加激活状态
  document.getElementById(tabId).style.display = "block";
  event.currentTarget.className += " active";
}

在上面的代码中，我们使用了三个按钮作为选项卡的标签，通过JavaScript中的openTab函数来切换选项卡内容的显示。点击不同的选项卡按钮时，会改变对应选项卡按钮的背景颜色，并显示相应的选项卡内容。