javascript - 单击同一选项卡时，jquery 切换选项卡隐藏事件类

Question

当我单击选项卡 1 时，会显示 1 个内容并添加事件选项卡类。

当我单击选项卡 2 时，1 个内容隐藏删除选项卡事件类，2 个内容显示并添加选项卡事件类

但我想要的效果是当我点击选项卡 1 时，1 内容显示，再次点击选项卡 1 内容隐藏但选项卡事件类不会删除。

任何建议都会有帮助谢谢

<div id="tabs_container">
   <ul class="tabs">
     <li>
       <a href="#" rel="#tab_1_contents" class="tab">Option 1</a>
     </li>
     <li>
        <a href="#" rel="#tab_2_contents" class="tab">Option 2</a>
     </li>
    </ul>

    <div class="tab_contents_container">    
      <div id="tab_1_contents" class="tab_content tab_contents_active">
         Option 1 stuff     
      </div>

      <div id="tab_2_contents" class="tab_content">'
         Option 2 stuff</div>
      </div>

     </div>
</div>

<script>
$('.tab-content').hide();

  $('.tab').click(function() {
     var target = $(this.rel);          
        $('.tab-content').not(target).hide();
        target.toggle();

  $('#tabs_container > .nav-tabs > li.tabActive')
      .removeClass('tabActive');

  $(this).parent().addClass('tabActive');

  $('#tabs_container > .tab_contents_container > div.tab_contents_active')
      .removeClass('tab_contents_active'); 

  $(this.rel).addClass('tab_contents_active');
 });
 </script>

Answer 1

你需要使用.toggleClass();

$('#tabs_container > .nav-tabs > li.tabActive').not($(this).parent()).removeClass('tabActive');
$(this).parent().toggleClass('tabActive');

$('.tab').click(function() {
     var target = $(this.rel);

  $('#tabs_container li').not($(this).parent()).removeClass('tabActive');

  $(this).parent().toggleClass('tabActive');

  $('#tabs_container > .tab_contents_container > div').not($(target)).removeClass('tab_contents_active'); 
  $(target).toggleClass('tab_contents_active');
 }).eq(0).click();

.tabActive{
  background : #005eff;
  padding : 5px;
  
}
.tabActive > a{
  color :#fff;
}

.tab_content{
  display : none;
}

.tab_contents_active{
  display : block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="tabs_container">
   <ul class="tabs">
     <li>
       <a href="#" rel="#tab_1_contents" class="tab">Option 1</a>
     </li>
     <li>
        <a href="#" rel="#tab_2_contents" class="tab">Option 2</a>
     </li>
    </ul>

    <div class="tab_contents_container">    
      <div id="tab_1_contents" class="tab_content">
         Option 1 stuff     
      </div>

      <div id="tab_2_contents" class="tab_content">
         Option 2 stuff
      </div>

     </div>
</div>