点击mark-container中c-1按钮时，second-mark同data-id按钮无法同步激活的解决方法

嘿，我来帮你搞定这个同步激活的问题！咱们先看看当前代码的核心问题：你点击按钮时只给当前点击的单个按钮加了active类，没把所有拥有相同data-id的.c-1按钮都选中并同步状态，所以其他容器里的同id按钮不会跟着高亮。

下面是修改后的完整方案，我会一步步说明改动点：

关键修改的JavaScript代码 #

$('.c-1').click(function() {
  // 获取当前点击按钮的data-id值
  var tab = $(this).attr('data-id');
  
  // 先清空所有按钮和详情模块的激活状态
  $('.c-1').removeClass('active');
  $(".c-1-details").removeClass('active');
  
  // 重点改动：选中所有data-id匹配的.c-1按钮，统一添加激活类
  $('.c-1[data-id="' + tab + '"]').addClass('active');
  
  // 激活对应id的详情模块
  $('#' + tab).addClass('active');
});

改动逻辑说明 #

• 原来的$(this).addClass('active')只能作用于当前点击的按钮，现在换成属性选择器$('.c-1[data-id="' + tab + '"]')，就能选中页面上所有拥有相同data-id的.c-1按钮，实现同步激活。
• 其余步骤和原逻辑保持一致：先重置所有元素的激活状态，再给目标元素添加样式，避免出现多个激活状态残留的问题。

完整可运行代码 #

<!DOCTYPE html>
<html>
<head>
  <style>
    .c-1-details { display: none; }
    .c-1-details.active { display: block; }
    .active { color: green; font-weight: bold; }
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
  <div class="mark-container">
    <button class="c-1 active" data-id="tab-1">
      <p>for 1 btn</p>
    </button>
    <button class="c-1" data-id="tab-2">
      <p>for 2 btn</p>
    </button>
    <div class="c-1-details active" id="tab-1">
      <p>for 1 details</p>
    </div>
    <div class="c-1-details" id="tab-2">
      <p>for 2 details</p>
    </div>
  </div>
  <div class="second-mark">
    <ul>
      <button class="c-1 active" data-id="tab-1">current btn 1</button>
      <button class="c-1" data-id="tab-2">current btn2</button>
    </ul>
    <div class="c-1-details active" id="tab-1">
      display content 1
    </div>
    <div class="c-1-details" id="tab-2">
      display content 2
    </div>
  </div>

  <script>
    $('.c-1').click(function() {
      var tab = $(this).attr('data-id');
      $('.c-1').removeClass('active');
      $(".c-1-details").removeClass('active');
      $('.c-1[data-id="' + tab + '"]').addClass('active');
      $('#' + tab).addClass('active');
    });
  </script>
</body>
</html>

现在测试一下：不管点击mark-container还是second-mark里的按钮，所有同data-id的.c-1按钮都会同步变成绿色加粗的激活状态，对应的详情模块也会正常显示啦～

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