【问题标题】：Hide Tabs Heading with Angular UI / Bootstrap UI使用 Angular UI / Bootstrap UI 隐藏标签标题
【发布时间】：2015-02-08 18:46:23
【问题描述】：

我正在努力隐藏使用 Angular UI 创建的选项卡的标题。

对于我的解决方案，我需要在页眉中设置选项卡的按钮，并在页面上的另一个容器中设置内容。

我需要隐藏指令呈现的选项卡按钮。

有什么想法吗？

<div id="menuTabs">

<div ng-class="{menuTab: true}" data-ng-click="tabActiveMenu1 = true">Menu1</div>
<div ng-class="{menuTab: true}" data-ng-click="tabActiveMenu2 = true">Menu2</div>
<div ng-class="{menuTab: true}" data-ng-click="tabActiveMenu3 = true">Menu3</div>
<div ng-class="{menuTab: true}" data-ng-click="tabActiveMenu4 = true">Menu4</div>

</div>

<div data-tabset id="menuTabs">
<div data-tab data-active="tabActiveMenu1">
<div data-tab-heading data-ng-class="{hide:true}"></div>        
    Content1
</div>
<div data-tab data-active="tabActiveMenu2">
    <div data-tab-heading data-ng-class="{hide:true}"></div>        
    Content2
</div>
<div data-tab data-active="tabActiveMenu3">
    <div data-tab-heading data-ng-class="{hide:true}"></div>        
    Content3
</div>
 <div data-tab data-active="tabActiveMenu4">
    <div data-tab-heading data-ng-class="{hide:true}"></div>        
    Content4
</div>

【问题讨论】：

我对你在这里问什么感到困惑。您是否要使选项卡按钮完全消失？或者你想隐藏网页的标题？无论如何，它听起来像 ng-hide、ng-show、ng-if 和（如果您仍然希望按钮显示，只需禁用）ng-disabled。我强烈建议您研究这些指令。
您好，感谢您对我的支持。使用我发布的 html，我将有两个按钮来激活内容。第一个是在我的元素 menuTabs 内部创建的，第二个将由 agnular ui tabs 指令呈现。我需要隐藏第二个，但我不知道如何通过参数访问它以添加类或任何其他解决方法

标签： angularjs angular-ui angular-ui-bootstrap

【解决方案1】：

如果您想隐藏除活动选项卡之外的所有选项卡，您可以在 CSS 中执行以下操作：

.nav>li>a {
  display: none;
}
.nav-tabs>li.active>a,
.nav-tabs>li.active>a:hover,
.nav-tabs>li.active>a:focus {
  display: block;
}

demo

如果您想删除所有选项卡，只显示内容，您可以编辑模板或仅使用上面的第一条规则（因此选项卡始终处于活动状态或隐藏状态）。

【讨论】：

非常感谢！这给了我一个想法。我把这弄得太复杂了。我不知道为什么我不能向元素添加 css 类，但最终它应该可以工作，我只是做了 .my-menu-class>ul.nav-tabs{display: none}
太棒了。如果它回答了您的问题，请相应地标记它，以便其他人将来可以从中受益。

【解决方案2】：

我也在寻找删除所有标签页眉的方法。这是我发现需要的：

.nav>li>a,
.nav-tabs {
    display: none;
}

第二行是删除标签页眉底部的实线所必需的

【讨论】：