Question

我正在努力实现一些我以前相对肯定已做过多次的事情，但我似乎无法找到任何文件。

我正在使用响应式引导程序，受影响的功能围绕“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>

我想要实现的功能是隐藏选项卡内容（如果它已经处于活动状态）的功能。（在上面的示例中，单击活动的< a >应该从按钮本身和相关div（"active"）中删除#tab1类，其方式不会对可列表功能构成威胁）

我认为这有一个非常简单的解决方案，对于bootstrap来说是新手，然而，我还没有找到它并且不想使用一些有瑕疵的javascript解决方案挖掘我自己的坟墓。

编辑：发表评论后，我想进一步澄清我的疑问。如果我点击与处于活动状态的div相关的按钮，我想要没有显示任何标签，换句话说，我希望点击以相同的方式工作.toggle在jquery中工作，就像一个翻转开关。

任何想法/输入都非常有用！

Answer 1

我认为只有使用HTML标记和数据属性才能实现此目的。如果可以通过一点JavaScript轻松实现（不要太晦涩！）..

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

Bootply Demo

切换“tabbable” - bootstrap

1 个答案: