Question

有人可以帮我用css隐藏标签页吗？我正在使用primefaces控件，页面上有一个常规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" > - 此标题

Answer 1

您必须为您瞄准的标签使用ID，然后将样式应用于它

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

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

Answer 2

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

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

然后将以下内容添加到您的CSS文件中：

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

易于使用，可用于其他TabView。

Primefaces标签标题样式

2 个答案: