Onclick时激活所有数据ID和＃

Question

问题出错的是当我 Onclick for＆＃34; c-1＆＃34; btn in div = mark-container，同一个id将同时激活，但另一个按钮也是＆＃34; c-1＆＃34;在div = second-mark 中，不会一起活动，如何制作＆＃34;它要一起活动吗？

＆＃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;

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

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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>