Bootstrap药丸不能按预期工作

Question

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

因此，使用AngularJS，在我的观点一个我用的药丸（而不是作为一个NAV）

有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>