Primefaces 选项卡标题样式答案

【问题标题】：Primefaces tab header stylePrimefaces 选项卡标题样式
【发布时间】：2015-04-07 08:05:00
【问题描述】：

有人可以帮我用 css 隐藏标签页吗？我正在使用 primefaces 控件，页面上有一个通用的 tabview。并且在常规 tabview 的每个选项卡上都有一个 tabview(ribbon)。我需要隐藏子标签视图的所有标签标题，但显示一般标签视图的标签标题。

我已经尝试过使用

.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>

通用标签视图的示例标签：

<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" > - 这个标题

【问题讨论】：

标签： css primefaces tabs ribbon tabview

【解决方案1】：

您必须为您瞄准的标签使用一个 id，然后将样式应用到它

#myTabId .ui-tabs.ui-tabs-top > .ui-tabs-nav { display: none!important; }

我不确定#myTabId和.ui-tabs之间的空间尝试使用并删除它并查看结果

【讨论】：

很抱歉，它不起作用。我试图设置你所说的样式和子 tabviewId 和 tabId (display: none!important;) 但标题仍然可见。然后我尝试用我的 css 隐藏所有标题并为一般 tabview 设置样式（显示：block！important;）但是所有标题都变得不可见
我已经更改了我的 qustion 并添加了我的 html 代码以显示元素
根据我使用 primefaces 的经验，最好的方法是尝试使用浏览器（firefox 或 chrome）检查元素，然后将 display 属性应用于检查的元素，然后您可以看到实时结果

【解决方案2】：

只需将 styleClass“hideTabHeader”添加到 p:tabView styleClass。

<p:tabView id="idXYZTabView" styleClass="hideTabHeader" ..

在您的 CSS 文件中添加以下内容：

.hideTabHeader > .ui-tabs-nav
{
    display: none !important;
}

其他 TabView 的简单且可重复使用。

【讨论】：