使用 Angular UI / Bootstrap UI 隐藏标签标题

Question

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

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

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

有什么想法吗？

<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

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

Answer 2

我也在寻找删除所有选项卡的方法 headers。这是我发现需要的东西：

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

第二行是删除选项卡底部的实线所必需的headers

使用 Angular UI / Bootstrap UI 隐藏标签标题

Hide Tabs Heading with Angular UI / Bootstrap UI

angularjs

angular-ui

angular-ui-bootstrap

demo