3

我正在尝试实现一些我比较确定之前已经做过几次的事情，但是我似乎找不到任何关于它的文档。

我为此使用了响应式引导程序，受影响的功能围绕“可选项卡”组件展开。（见下文）

<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 >应该"active"从按钮本身和相关的 div ( #tab1) 中删除类，而不会对可选项卡功能构成威胁）

我认为有一个非常简单的解决方案，但是对于引导程序来说是新手，我还没有找到它，也不想使用一些晦涩的 JavaScript 解决方案来挖掘自己的坟墓。

编辑：发表评论后，我想进一步澄清我的查询。如果我单击与处于活动状态的 div 相关的按钮，我根本不希望显示任何选项卡，换句话说，我希望单击的工作方式与 .toggle 在 jquery 中的工作方式相同，就像翻转开关一样。

任何想法/输入都非常受欢迎！

4

1 回答 1

0

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

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

Bootply Demo

于 2013-05-21T11:39:11.000 回答