javascript - 我如何在 bootstrap 中结合使用药丸，药丸和药丸？

我正在尝试制作一些药丸，单击它们将显示并在某些内容之间切换。

这很好。

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

这是我当前的代码，您可以尝试以下操作：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，只需要将对制表符的所有引用更改为折叠即可。标签是指总是显示的选项卡，但是，崩溃变成了……崩溃！

Here is you JSFiddle Updated

更改包括：


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