Bootstrap药丸未按预期工作

Question

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

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

有3个药丸，其中2个似乎显示正确的东西，但活性药丸显示所有3个东西，我需要修复。我在这里看了一下并引导网站。我将所有药丸位改为标签，例如“tab-pane”，我也尝试将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>