javascript - 如何在 onClick 时激活 4 个相同的数据 ID？

Question

我想点击一个“c-1”按钮，但它可以激活并显示所有相同 id 的内容，但同时，我可以添加什么来调用不同的 div 中的所有内容？

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mark-container">
  <div class="c-1" data-id="tab-1">
    <p>for 1 btn</p>
  </div>

  <div class="c-1-details" id="tab-1">
    <p>for 1 details</p>
  </div>
</div>

<div class="second-mark">
  <ul>
    <li class="tab-corner" data-tab="tab-1">tab-1-btn</li>
  </ul>

    <div class="tab-content" id="tab-1">
      tab-1-content
    </div>
</div>


<script>
  $('.c-1').click(function() {
    var tab = $(this).attr('data-id');

    $('.c-1').removeClass('active');
    $(".c-1-details").removeClass('active');

    $(this).addClass('active');
    $("#" + tab).addClass('active');
  });
</script>

Answer 1

注意 :Id 是唯一的。所以最好使用 class 进行多元素匹配

我只是根据多个 id 与 attr 匹配的 [id="tab"]

进行编码

$('.c-1').click(function() {
    var tab = $(this).attr('data-id');

    $('.c-1').removeClass('active');
    $(".c-1-details").removeClass('active');

    $(this).addClass('active');
    $("[id='"+tab+"']").addClass('active');
  });

.active{
color:green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mark-container">
  <div class="c-1" data-id="tab-1">
    <p>for 1 btn</p>
  </div>

  <div class="c-1-details" id="tab-1">
    <p>for 1 details</p>
  </div>
</div>

<div class="second-mark">
  <ul>
    <li class="tab-corner" data-tab="tab-1">tab-1-btn</li>
  </ul>

    <div class="tab-content" id="tab-1">
      tab-1-content
    </div>
</div>