有人可以帮我用css隐藏标签标题吗?我正在使用primefaces控件,页面上有一个常规tabview。一般tabview的每个选项卡上都有一个tabview(功能区)。我需要隐藏子tabview的所有标签标题,但显示常规tabview的标签标题。
我试着通过使用来实现它
.ui-tabs.ui-tabs-top > .ui-tabs-nav {
display: none!important;
}
但是这段代码隐藏了所有标题。
我的代码:
<ui:composition template="./../WEB-INF/pagesTemplate.xhtml">
<ui:define name="content">
<h:form id="centralTable">
<p:tabView id="tabview"
value="#{tabView.tabList}"
widgetVar="wtabview"
style="height: 100%"
dynamic="true">
<p:ajax event="tabChange" listener="#{tabView.onTabChange}"/>
<c:forEach items="#{tabView.tabList}" var="pageUrl">
<p:tab title= "#{msg[tabView.getCommonTitleByPage(pageUrl)]}">
<ui:include src="#{pageUrl}" />
</p:tab>
</c:forEach>
</p:tabView>
</h:form>
</ui:define>
</ui:composition>
常规tabview的示例选项卡:
<p:tab title="#{msg['header.Main.Model']}">
<p:ribbon id="ribbonPannelModel">
<p:tab title="Model" id="tabModel" >
<p:ribbonGroup label="#{msg['header.Common.Editing']}" id="rgModelEdit">
...
</p:ribbonGroup>
</p:tab>
</p:ribbon>
<p:dataTable id="dtModel" widgetVar="wdtModel">
...
</p:dataTable>
</p:tab>
我需要隐藏<p:tab title="Model" id="tabModel" >
- 这个标题
您必须为您瞄准的选项卡使用id,然后将样式应用于该选项卡
#myTabId .ui-tabs.ui-tabs-top > .ui-tabs-nav {
display: none!important;
}
我不确定#myTabId和.ui-tabs之间的空间是否尝试使用并删除它并查看结果
只需将styleClass“hideTabHeader”添加到p:tabView styleClass即可。
<p:tabView id="idXYZTabView" styleClass="hideTabHeader" ..
以下是您的CSS文件:
.hideTabHeader > .ui-tabs-nav
{
display: none !important;
}
其他TabView易于重复使用。