单击时激活所有数据id和#

Question

问题是当我在div =mark-中单击"c-1“btn时，相同的id将在同一时间内活动，但是div=第二标记中的另一个也是"c-1”的按钮不会一起活动，如何使“它一起活动？”

​

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

.c-1-details {
  display: none;
}

.c-1-details.active {
  display: block;
}

.active {
  color: green;
  font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

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

​

Answer 1

正如注释中提到的，id应该是元素的唯一元素。公共元素总是可以用相同的class表示。以下代码是不言自明的.

​

$('.c-1').click(function() {
            var tab = $(this).attr('data-id');
            $('.c-1,.c-1-details').removeClass('active');
            $('.' + tab + ', .details-' + tab).addClass('active');
        });

.c-1-details {
        display: none;
    }

    .c-1-details.active {
        display: block;
    }

    .active {
        color: green;
        font-weight: bold;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>    


      <div class="mark-container">
        <button class="c-1 tab-1 active" data-id="tab-1">
            <p>for 1 btn</p> 
        </button>

        <button class="c-1 tab-2" data-id="tab-2">
            <p>for 2 btn</p>
        </button>

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

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

    <div class="second-mark">
        <ul>
            <button class="c-1 tab-1 active" data-id="tab-1">current btn 1</button>

            <button class="c-1 tab-2" data-id="tab-2">current btn2</button>
        </ul>

        <div class="c-1-details details-tab-1 active" data-id="tab-1">
            display content 1
        </div>

        <div class="c-1-details details-tab-2 " data-id="tab-2">
            display content 2
        </div>
    </div>

​