Javascript Angular JS:引导选项卡未正确显示

为什么不使用AngularJS tabbale指令显示选项卡

这是angularJS的可选部分，在文档（）中随处可见

该指令的来源是

我在文档站点中没有看到任何特殊的css

编辑： plunkr（上面）的标记是从上面给出的文档链接复制的。 但是，当在angularjs.org主页上尝试使用标记时，它是有效的。 不确定它在文档站点上是如何工作的。 工作标记具有

数据切换

属性和指向选项卡窗格的url片段

<div class="tabbable">
    <ul class="nav nav-tabs">
        <li class=""><a href="#project-html" data-toggle="tab">index.html</a></li>
        <li class=""><a href="http://angularjs.org/#project-js" data-toggle="tab">project.js</a></li>
        <li class=""><a href="http://angularjs.org/#list-html" data-toggle="tab">list.html</a></li>
        <li class="active"><a href="http://angularjs.org/#detail-html" data-toggle="tab">detail.html</a></li>
        <li class=""><a href="http://angularjs.org/#mongolab-js" data-toggle="tab">mongolab.js</a></li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane" id="project-html">
            <h1>project</h1>
        </div>
        <div class="tab-pane" id="project-js">
            <h1>project js</h1>

        </div>
        <div class="tab-pane" id="list-html">
            <h1>project html</h1>

        </div>
        <div class="tab-pane active" id="detail-html">
        </div>
        <div class="tab-pane" id="mongolab-js">
        </div>
    </div>
</div>

项目
js项目
项目html

必须在某个地方编写一些功能/代码，才能使选项卡正常工作。目前，您只有html和css（提供结构和样式），缺少行为部分（JS部分）

在angular中，此行为是自定义编写的，并由指令提供。在bootstap中，您需要包含js文件（bootstrap.js？）。那么，有两种方法可以让这一切顺利进行。可以将文档中指定的数据-*元素包含在适当的位置，也可以在文档就绪时调用类似的内容

$(".tabbable").tabs();

---

在JS代码的某个地方。这是您的plunker中缺少的行为片段。

好吧，我使用指令，因为它在文档中使用，在我的plunkr中也使用。它是作为“引导”注入的，因此您可以看到选项卡工作。如果删除它，则没有选项卡行为。这没什么大不了的，因为我使用主页上的标记。