Question

我使用的是primefaces 5.2。我有一个方向左侧的tabView。我需要更改所选标签的颜色。

这是我的代码：

<p:tabView orientation="left" id="tabViewID" dynamic="true"
                        cache="false"
                        activeIndex="#{manageBean.activeIndex}"
                        style="margin-left: 1%;width: 98%;background-color: #F5F5F5;">
                        <p:ajax event="tabChange"
                            listener="#{manageBean.fetchReports}" />
                        <p:tab title="Tab1" id="tabID1"  >

                        </p:tab>

                        <p:tab title="Tab2">

                        </p:tab>

                        <p:tab title="Tab3">

                        </p:tab>
</p:tabView>

以下是截图：

任何想法？

Answer 1

只需检查Tab并更改默认CSS类中的颜色..

尝试这样......

<style type="text/css">
        body .ui-tabs.ui-tabs-top .ui-tabs-nav li.ui-state-active,
        body .ui-tabs.ui-tabs-bottom .ui-tabs-nav li.ui-state-active,
        body .ui-tabs.ui-tabs-left .ui-tabs-nav li.ui-state-active, 
        body .ui-tabs.ui-tabs-right .ui-tabs-nav li.ui-state-active{
            background: #e4a1c2;
        }
 </style>

Answer 2

在Primefaces中，选项卡在列表项（<a>）内呈现为链接（<li>）。

我有一个案例，我只想更改特定标签的颜色。我就这样做了：

1）在<p:tab>定义中，我添加了一个titleStyleClass，根据我的条件将一个类定义添加到列表项（标签项）：

<p:tab id="tab_id" title="#{campeur.prenomNom}" 
    titleStyleClass="#{campeur.nouveauCampeur ? 'tabNouveau' : 'tabExistant'}">

2）我在css中添加了样式定义来更改选项卡的背景颜色。选项卡未选中时颜色为ligther，选择或悬停选项卡时颜色较暗。我只在类tabNouveau出现时应用此颜色更改，即满足我的条件时。否则，tabExistant类没有特定的样式：

li.tabNouveau a {
    background-color: #FFE289;
}

li.tabNouveau.ui-state-active a, li.tabNouveau.ui-state-hover a {
    background-color: #FFD44F;
 }

得出以下结果：

希望这可以帮助别人！

如何在方向左侧更改tabView中的primefaces选项卡的颜色？

2 个答案: