如何在引导程序中组合药丸、塌陷和标签

How do I combine pills, collapse and tabs in bootstrap?

本文关键字：标签 引导程序 组合      更新时间：2023-09-26

我正在尝试创建一些药丸，点击后会显示并在一些内容之间切换。

这很好用。

当再次单击活动药丸时，我也想隐藏内容。这让我无法上班。

这是我当前的代码，你可以试试这个小提琴：https://jsfiddle.net/9phcsmwa/1/

当你点击其中一个药丸时，它会显示内容，当你点击另一个药丸后，它会在类似标签的内容之间切换。但是，当点击活动药丸时，我该如何隐藏内容？

<div id="accordion">
    <div data-parent="#accordion" href="">
        <ul id="tabs" class="nav nav-pills" data-toggle="collapse" data-tabs="tabs">
            <li><a data-toggle="tab" href="#Pill1" class="btn btn-s-md btn-white m-b">Pill1</a></li>
            <li><a data-toggle="tab" href="#Pill2" class="btn btn-s-md btn-white m-b">Pill2</a></li>
            <li><a data-toggle="tab" href="#Pill3" class="btn btn-s-md btn-white m-b">Pill2</a></li>
        </ul>
    </div>
</div>
<div id="collapse" class="panel-collapse collapse in">
    <div class="tab-content">
        <div id="Pill1" class="tab-pane fade">
            <h3>Pill 1</h3>
            <p>Some content.</p>
        </div>
        <div id="Pill2" class="tab-pane fade">
            <h3>Pill 2</h3>
            <p>Some content for Pill 2.</p>
        </div>
        <div id="Pill3" class="tab-pane fade">
            <h3>Pill 3</h3>
            <p>Some content for Pill 3.</p>
        </div>
    </div>
</div>

谢谢。

您不需要javascript，只需要更改对选项卡的所有引用即可折叠。选项卡是指始终显示的，然而，折叠是为了。。。崩溃

这是你JSFiddle更新的

更改包括：

  • 您的所有data-toggle="tab"现在都是data-toggle="collapse"
  • 您的所有class="tab-pane fade"现在都是class="collapse fade"
  • 将您的三个选项卡内容包装在一个面板中。这是由于Bootstrap中的数据父级存在错误。详细信息可以在这里找到
  • 删除data-parent="#accordion"，然后将data-parent="#collapse"添加到所有三种药丸中

您可以添加以下jQuery代码：

$(document).ready(function() {
    $('#accordion [data-toggle="tab"]').click(function() {
       var $targetTabContent = $($(this).attr('href'));
       if ($targetTabContent.hasClass('active')) {
          $targetTabContent.removeClass('active');
       }    
    });
});

更新的JSFiddle

相关文章：