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

单击Tab1时，将添加一个内容显示和活动选项卡类

单击选项卡2时，1个内容隐藏移除选项卡活动类，2个内容显示并添加选项卡活动类

但我想要的效果是，当我单击tab 1，1内容显示，再次单击tab 1内容隐藏，但tab活动类不会删除

任何建议都会有帮助，谢谢

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

选项1材料
'
选项2材料
$（'.tab内容'）.hide（）；
$（'.tab'）。单击（函数（）{
var target=$（this.rel）；
$（'.tab content'）.not（target.hide（）；
target.toggle（）；
$（“#tabs_container>.nav tabs>li.tabActive”）
.removeClass（'tabActive'）；
$（this.parent（）.addClass（'tabActive'）；
$（'tabs\u container>.tab\u contents\u container>div.tab\u contents\u active'）
.removeClass（'tab_contents_active'）；
$（this.rel）.addClass（'tab_contents_active'）；
});

使用

target.show（）而不是
target.toggle（）
.toggle（）
将基于当前的
可见性
显示（）/hide（）
元素

同时纠正
打字错误
。在选择项目时，您使用的是
-
而不是


$（'.tab_content'）.hide（）//这里输入错误！
$（'.tab'）。单击（函数（）{
$（'.tab_content'）.hide（）；
var target=$（this.rel）；
if（$（this）.parent（）.hasClass（'tabActive'））{
target.hide（）；
$（this.parent（）.removeClass（'tabActive'）；
}否则{
$（'.tabs li'）.removeClass（'tabActive'）；
target.show（）；
$（this.parent（）.addClass（'tabActive'）；
}
});
.tabActive{
背景：橙色；
}







选项1材料
选项2材料
您需要使用
.toggleClass（）


$（'.tab'）。单击（函数（）{
var target=$（this.rel）；
$（'#tabs_container li'）。不是（$（this.parent（））。removeClass（'tabActive'）；
$（this.parent（）.toggleClass（'tabActive'）；
$（'tabs\u container>.tab\u contents\u container>div'）。不是（$（目标））.removeClass（'tab\u contents\u active'）；
$（目标）.toggleClass（'tab_contents_active'）；
}).eq（0）.单击（）
.tabActive{
背景：#005eff；
填充物：5px；
}
.tabActive>a{
颜色：#fff；
}
.tab_内容{
显示：无；
}
.tab\u内容\u活动{
显示：块；
}







选项1材料
选项2材料
更简单的代码版本：


$（'.tab'）。单击（函数（）{
$（'.tab\u content'）.removeClass（'tab\u contents\u active'）；
$（this.rel）.addClass（“选项卡内容”处于活动状态）；
});
.tab_内容{显示：无；}
.tab_content.tab_contents_active{display:block；}







选项1材料
选项2材料
Just
target.show（）而不是
target.toggle（）不起作用，我的jQuery技能为0，我从另一篇文章复制了这段代码，一切正常我只想添加一个选项，即当我单击同一选项卡时，内容将隐藏，活动类将删除。现在，当单击同一选项卡时，内容不会隐藏，选项卡活动类也不会删除。感谢您的时间，但不起作用，因为当我单击选项卡1时，内容显示，但是，当我再次单击选项卡1时，内容隐藏和.tabActive（橙色背景）应该消失。如果不起作用，我的jQuery技能为0，我再次单击同一选项卡，内容将隐藏，但选项卡中的活动类不会删除。
$('#tabs_container > .nav-tabs > li.tabActive').not($(this).parent()).removeClass('tabActive');
$(this).parent().toggleClass('tabActive');