如何在onClick上激活4个相同的数据ID？

Question

我想点击一个按钮，即＆＃34; c-1＆＃34;但它可以激活并显示所有相同ID的内容，但同时，我可以添加什么来调用所有不同的div？

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

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

我刚刚使用attr匹配[id="tab"]

从多个id匹配编码

＆＃13;

＆＃13;

$('.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');
  });

＆＃13;

.active{
color:green;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;