angularjs - 使用 Angular UI/Bootstrap UI 隐藏选项卡标题

Question

我正在努力隐藏使用 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>

Answer 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

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