嘿，我来帮你搞定点击标签时切换按钮容器背景的需求～其实不用额外创建btncontainer2也能实现效果，当然如果你确实需要独立容器我也会讲两种方案，先从最简洁的类切换方式说起：

方案1：用CSS类切换背景样式（推荐） #

这种方式不用新增容器，只需要给按钮容器准备不同的背景类，点击标签时切换类即可：

第一步：定义不同的背景样式

在你的CSS里添加对应每个标签的按钮容器背景类：

/* 按钮容器的基础样式（保留你原来的样式） */
#btncontainer {
  /* 比如你原来的padding、布局等样式 */
  padding: 10px;
  transition: background-color 0.3s ease; /* 加个过渡动画更丝滑 */
}

/* 对应Tab 1的背景样式（月野兔风格） */
#btncontainer.tab1-bg {
  background-color: #ffcad4;
  border-color: #f4acb7;
}

/* 对应Tab 2的背景样式（水野亚美风格） */
#btncontainer.tab2-bg {
  background-color: #a2d2ff;
  border-color: #8ecae6;
}

第二步：修改openTab函数，添加切换类的逻辑

在你现有的openTab函数里，处理完标签内容切换后，加上切换按钮容器类的代码：

function openTab(evt, tabName) {
  // 保留你原来的标签内容切换逻辑
  let i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(tabName).style.display = "block";
  evt.currentTarget.className += " active";

  // 新增：切换按钮容器的背景类
  const btnContainer = document.getElementById("btncontainer");
  // 先移除所有背景类，避免样式冲突
  btnContainer.classList.remove("tab1-bg", "tab2-bg");
  // 根据当前点击的标签添加对应类
  if (tabName === "Tab 1") {
    btnContainer.classList.add("tab1-bg");
  } else if (tabName === "Tab 2") {
    btnContainer.classList.add("tab2-bg");
  }
}

第三步：设置页面加载时的默认样式

因为页面默认打开Tab 1，所以要在页面加载完成后给按钮容器加上对应的背景类：

window.onload = function() {
  // 给按钮容器设置默认背景
  document.getElementById("btncontainer").classList.add("tab1-bg");
  // 触发默认标签的点击（保留你原来的代码）
  document.getElementById("defaultOpen").click();
};

方案2：使用独立的按钮容器（btncontainer2） #

如果你确实需要两个完全独立的按钮容器（比如按钮布局也不同），可以这样做：

第一步：在HTML里添加第二个容器

把两个容器都写在页面里，默认只显示第一个：

<div id="container">
  <!-- 第一个按钮容器（默认显示） -->
  <div id="btncontainer" class="btn-container">
    <button class="buttonnorm tablinks" onclick="openTab(event, 'Tab 1')" id="defaultOpen">
      <span class="chaname">usagi tsukino</span>
      <br>
      <span class="chasubtitle">sailor moon</span>
    </button>
  </div>
  <!-- 第二个按钮容器（默认隐藏） -->
  <div id="btncontainer2" class="btn-container" style="display: none;">
    <button class="button2 tablinks" onclick="openTab(event, 'Tab 2')">
      <span class="chaname">ami mizuno</span>
      <br>
      <span class="chasubtitle">sailor mercury</span>
    </button>
  </div>
  <!-- 你的标签内容区域 -->
  <div id="Tab 1" class="tabcontent">...</div>
  <div id="Tab 2" class="tabcontent">...</div>
</div>

第二步：修改openTab函数，切换容器显示

在函数里添加切换两个容器显示状态的逻辑：

function openTab(evt, tabName) {
  // 保留原来的标签内容切换逻辑
  let i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(tabName).style.display = "block";
  evt.currentTarget.className += " active";

  // 新增：切换按钮容器的显示
  const container1 = document.getElementById("btncontainer");
  const container2 = document.getElementById("btncontainer2");
  if (tabName === "Tab 1") {
    container1.style.display = "block";
    container2.style.display = "none";
  } else if (tabName === "Tab 2") {
    container1.style.display = "none";
    container2.style.display = "block";
  }
}

两种方案里，第一种更简洁易维护，不用重复写按钮代码；第二种适合按钮布局差异很大的场景，你可以根据自己的需求选～

内容的提问来源于stack exchange，提问作者sandybree