如何实现当前点击的Tab内容始终显示在对应容器？现有代码问题求助

看起来你遇到的核心问题是全局操作所有Tab和内容，导致点击一个容器里的Tab时，会把其他容器的内容也一起隐藏。咱们一步步来修复：

问题根源分析 #

1. 你用了重复的id="link"，HTML里id必须是唯一的，这会导致选择器混乱，应该改成类（比如class="tab-link"）。
2. 原代码里$('#link').removeClass('current')和$('.tab-content').removeClass('current')是全局操作，会影响所有容器里的元素，这就是其他容器内容消失的原因。

修复方案 #

我们需要把每个Tab组放在独立的容器里，点击时只操作当前容器内的Tab和内容，而不是全局修改。

步骤1：修正HTML结构

给每个Tab组加一个父容器（比如class="tab-container"），把重复的id改成类：

<!-- 第一个Tab容器 -->
<div class="tab-container">
  <button class="tab-link current" data-tab="tab1">Tab 1</button>
  <button class="tab-link" data-tab="tab2">Tab 2</button>
  
  <div class="tab-content current" id="tab1">内容1</div>
  <div class="tab-content" id="tab2">内容2</div>
</div>

<!-- 第二个Tab容器 -->
<div class="tab-container">
  <button class="tab-link current" data-tab="tab3">Tab A</button>
  <button class="tab-link" data-tab="tab4">Tab B</button>
  
  <div class="tab-content current" id="tab3">内容A</div>
  <div class="tab-content" id="tab4">内容B</div>
</div>

步骤2：修改JavaScript代码

点击Tab时，先找到当前按钮所在的容器，只在这个容器内操作元素：

$(document).ready(function(){
  // 绑定类选择器的点击事件
  $('.tab-link').click(function(){
    // 获取当前点击的按钮所在的容器
    const $container = $(this).closest('.tab-container');
    const tab_id = $(this).attr('data-tab');
    
    // 只在当前容器内移除其他Tab的current类
    $container.find('.tab-link').removeClass('current');
    // 只在当前容器内移除其他内容的current类
    $container.find('.tab-content').removeClass('current');
    
    // 给当前点击的Tab加current类
    $(this).addClass('current');
    // 显示当前容器内对应的内容
    $container.find("#"+tab_id).addClass('current');
  })
})

步骤3：补充必要的CSS（确保内容切换生效）

.tab-content {
  display: none;
}
.tab-content.current {
  display: block;
}
.tab-link.current {
  background: #ccc; /* 高亮当前Tab，可自定义样式 */
}

为什么这样有效？ #

• 用closest('.tab-container')锁定了当前操作的范围，不会影响其他容器里的元素。
• 把id改成类，符合HTML规范，避免了选择器冲突。
• 所有操作都限制在当前容器内，每个Tab组独立工作，互相不干扰。

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