demo

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

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

Answer 2

我也在寻找删除所有标签标题的方法。以下是我发现的所需内容：

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

第二行是删除标题页底部的实线

所必需的

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

2 个答案:

demo