angular-ui选项卡呈现没有href的锚标签答案

【问题标题】：angular-ui tab renders anchor tag without hrefangular-ui选项卡呈现没有href的锚标签
【发布时间】：2013-10-23 23:55:24
【问题描述】：

我正在使用 AngularUI 选项卡，如下面的示例代码和 plunker 所示。

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

    <tabset class="tabbable tabbable-custom tabbable-full-width">
    <tab class="active" heading="Latest Customers" href="javascript:;">
        <div class="tab-pane active" id="Div1">
            Pane 1
        </div>
    </tab>
    <tab heading="Feeds" href="javascript:;">
        <div class="tab-pane" id="Div2" href="javascript:;">
            <div class="tab-pane active" id="Div3">
               Pane 2
            </div>
        </div>
    </tab>
</tabset>

正如您在plunker 中看到的，当鼠标悬停在“选项卡”上时，光标不会变为您的典型手指。 angularui 正在渲染的锚标记上没有 href 值，因此，它被认为是无效的 html。如果我手动添加 href="javascript:;" ，光标像我想要的那样工作。

我的问题是，我怎样才能告诉指令添加一个 href 到锚标记？有什么建议吗？

谢谢，丹

【问题讨论】：

标签： angularjs angular-ui

【解决方案1】：

您可以添加针对标签的样式：

.nav-tabs > li > a {
    cursor: pointer;
}

【讨论】：

【解决方案2】：

只写：

<tabset 
       class="tabbable tabbable-custom tabbable-full-width"
       style="cursor: pointer;"
 >
 ....

【讨论】：

【解决方案3】：

嗯，这很奇怪，我也在我的项目中使用 angular-ui 选项卡。我复制并粘贴了您提供的确切代码，它工作得很好。

（见底部http://wiredbeast.com/coolframework/docs.html#/activity）我稍后可能会删除它，所以快点看。

所以我的猜测是你的引导 css 有问题。我正在使用 ui-bootstrap-tpls-0.6.0.min.js、bootstrap.js/css v3.0.0 和 https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js 用于角度

【讨论】：