jquery - 切换“可标签”- bootstrap

我正在努力实现一些我相对确定已经做了好几次的事情，但是我似乎找不到任何关于它的文件。
我使用的是响应性引导，受影响的功能围绕“tabbable”组件。（见下文）

<div class="tabbable"> <!-- Only required for left/right tabs -->
   <ul class="nav nav-tabs">
      <li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>
      <li><a href="#tab2" data-toggle="tab">Section 2</a></li>
   </ul>

   <div class="tab-content">
      <div class="tab-pane active" id="tab1">
         <p>I'm in Section 1.</p>
      </div>

      <div class="tab-pane" id="tab2">
         <p>Howdy, I'm in Section 2.</p>
      </div>
   </div>
</div>

我试图实现的是一个功能，如果选项卡已经处于活动状态，则隐藏其内容。（在上面的示例中，单击active< a >应该从按钮本身和相关div（"active"）中删除#tab1类，这样就不会对tabbable功能造成威胁）
我认为有一个非常简单的解决方案，作为一个新的引导程序，但是，我还没有找到它，不想挖我自己的坟墓使用一些obsure javascript解决方案。
编辑：在评论之后，我想进一步澄清我的问题。如果我单击与处于活动状态的div相关的按钮，我根本不想显示任何选项卡，换句话说，我希望单击以相同的方式工作。toggle在jquery中工作，就像flipswitch一样。
对任何想法/意见都非常赞赏！

最佳答案

我不认为只有HTML标记和数据属性可以做到这一点。如果可以用一点JavaScript轻松实现（不要太晦涩！）..

$('[data-toggle=tab]').click(function(){
  if ($(this).parent().hasClass('active')){
    $($(this).attr("href")).toggleClass('active');
  }
})

Bootply Demo