0

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

http://plnkr.co/edit/yu0Bh0?p=preview

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

该指令的来源在这里。

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

编辑：

plunkr（上）的标记是从上面给出的文档链接中复制的。但是，当尝试使用 Angular 主页 (angularjs.org) 上的标记时，它可以工作。不确定它在文档站点上是如何工作的。工作标记具有data-toggle属性和指向选项卡窗格的 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>
4

1 回答 1

1

必须在某处编写一些功能/代码才能使选项卡工作。目前，您所拥有的只是 html 和 css（提供结构和样式）并且缺少行为部分（JS 部分）。

在 Angular 中，此行为是自定义编写的，并由指令提供。在 bootstap 中，您需要包含 js 文件（ bootstrap.js ？）。然后有两种方法可以使这项工作。要么在适当的位置包含文档中指定的 data-* 元素，要么在文档就绪调用中包含类似

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

在您的 JS 代码中某处。这是您的 plunker 中缺少的行为部分。

于 2012-10-07T08:58:13.583 回答