Bootstrap 药丸没有达到预期效果

Question

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

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

有 3 个药丸，其中 2 个似乎显示正确的东西，但活性药丸同时显示所有 3 个东西，我需要修复。我在这里和 bootstraps 网站上四处张望。我将所有的 pill 位都更改为制表符，例如 "tab-pane" 并且我还尝试将 href 部分更改为数据目标，但无济于事。有人能指出我正确的方向吗？这是视图 html。（我目前使用轮播来显示图像，最终会使用音频和视频播放列表，但现在我在音频和视频部分写了纯文本只是为了看看它们在哪里结束 up.I 也使用指令只是为了让它更干净。轮播正常工作。）

<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 来排序吗？我读过 pills cant be nested，但我认为这意味着一个药丸中的一个药丸，因为我以前在一个视图中看到有人使用药丸来做这种事情。

如有任何帮助，我们将不胜感激！

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>

Bootstrap 药丸没有达到预期效果

Bootstrap Pills Not Working As Expected

angularjs

twitter-bootstrap

nav-pills