Tab切换内容异常：点击Lagers按钮显示Anglo-American内容求助

核心错误点： #

• 按钮事件的强制覆盖
  所有tablink按钮绑定的click事件里，都强制调用了currentSlide(1)。这会导致：点击Lagers按钮执行showTab('lagers')显示对应内容后，立刻触发currentSlide(1)，该函数会隐藏所有tabcontents，只显示索引为0的第一个内容块（也就是Anglo-American的内容），直接覆盖了Tab切换的结果。

• 重复ID违反HTML规范
  HTML中存在两个<div id="lagers">元素，ID必须唯一，document.getElementById只会获取DOM中第一个匹配的元素。这个问题当前被事件冲突掩盖，修复事件后需要同步修正。

• Tab与轮播逻辑未分离
  Tab切换和内容轮播的逻辑没有做区分，点击Tab时轮播逻辑强行重置到首个slide，导致Tab切换效果失效。

修复步骤： #

1. 移除按钮事件中的轮播强制调用
   修改按钮绑定的JavaScript代码，删除currentSlide(1)：

const header = document.querySelector(".header");
const links = header.getElementsByClassName("tablink");
for (var i = 0; i < links.length; i++) {
  links[i].addEventListener("click", function () {
    const current = document.getElementsByClassName("active");
    current[0].className = current[0].className.replace(" active", "");
    this.className += " active";
    // 移除这行：currentSlide(1);
  });
}

2. 修正重复的ID属性
   将第二个id="lagers"的元素改为唯一ID，例如：

<div class="tabcontent tabcontents fade" id="lagers-2">
  <!-- 内容保持不变 -->
</div>

3. 分离Tab与轮播的作用范围
   如果需要在不同Tab下实现独立轮播，需要给每个Tab的轮播内容添加分组标识（比如额外的类名），确保轮播逻辑只作用于当前激活Tab下的内容块，避免跨Tab干扰。

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