Bootstrap Pills 无法按预期工作

Question

如果我做了一些愚蠢的事情，我预先道歉，我还在学习。

所以使用 AngularJS，在我的一个观点中我使用了药丸（不是作为导航）

有 3 个药丸，其中 2 个似乎显示正确的东西，但活动药丸同时显示所有 3 个东西，我需要修复。我在这里和引导网站上环顾四周。我将所有药丸位更改为选项卡，例如“选项卡窗格”，我还尝试将 href 部分更改为数据目标，但无济于事。有人能指出我正确的方向吗？这是视图html。 （我目前对图像使用轮播，并且最终将使用音频和视频播放列表，但现在我在音频和视频部分编写纯文本只是为了查看它们的最终位置。我还使用指令来保持它更清洁。轮播工作正常。）

<div class="tab-content">

  <!-- Album Pill -->

  <div id="albums" class="tab-pane fade in active">

    <image-carousel> </image-carousel>

  </div>

  <!-- Audio Pill -->

  <div id="audio" class="tab-pane fade in active">

    <audio-player> </audio-player>

  </div>

  <!-- Video Pill -->

  <div id="video" class="tab-pane fade in active">

    <video-player> </video-player>

  </div>


</div>

<!-- Tab List -->

<div class="container">
  <ul class="nav nav-pills nav-justified">
    <li class="active"><a data-toggle="pill" href="#albums">ALBUMS</a></li>
    <li><a data-toggle="pill" href="#audio">AUDIO</a></li>
    <li><a data-toggle="pill" href="#video">VIDEO</a></li>
  </ul>
</div>

以下是活动专辑药丸的最终结果

我需要使用一些 jquery 来排序吗？我读过药丸不能嵌套，但我认为这意味着药丸中的药丸，因为我以前在视图中看到有人使用药丸来做这种事情。

任何帮助将不胜感激！

Answer 1

这可能是因为您将每个tab-pane 设置为active。你有没有试过这个：

<div id="albums" class="tab-pane fade in active">

  <image-carousel> </image-carousel>

</div>

<!-- Audio Pill -->

<div id="audio" class="tab-pane fade">

  <audio-player> </audio-player>

</div>

<!-- Video Pill -->

<div id="video" class="tab-pane fade">

  <video-player> </video-player>

</div>