单击同一选项卡时，jquery切换选项卡隐藏活动类

patas1818 发表于 Dev

patas1818

当我单击选项卡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>

人造丝

使用target.show();代替target.toggle();。.toggle()将show()/hide()根据其当前元素visibility

也正确typo。您正在使用-而不是_在选择项目时。

$('.tab_content').hide(); //typo here!
$('.tab').click(function() {
  $('.tab_content').hide();
  var target = $(this.rel);
  if ($(this).parent().hasClass('tabActive')) {
    target.hide();
    $(this).parent().removeClass('tabActive');
  } else {
    $('.tabs li').removeClass('tabActive');
    target.show();
    $(this).parent().addClass('tabActive');
  }
});

.tabActive {
  background: orange;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/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>