Primefaces - 更改 tabView 选项卡的背景答案

【问题标题】：Primefaces - Change background of tabView tabsPrimefaces - 更改 tabView 选项卡的背景
【发布时间】：2017-03-14 08:39:23
【问题描述】：

我正在使用 PrimeFaces 并尝试编辑我的 tabView 菜单项的背景颜色，但我无法这样做。这是必需的：

我在 xhtml 中添加 styleClass 属性。（写“...”而不是与问题无关的属性值的长列表。）

<p:tabView styleClass="menu" value="..." dir="..." dynamic="true" activeIndex="...">
        <p:ajax event="tabChange" listener="..." />
        <p:tab >
            <div> .... </div>
        </p:tab> 
</p:tabView>

生成的html是：

<div id="tabView" class="..... menu">
<ul class="...." role="tablist">
    <li class="...." role="tab" aria-expanded="true">
        <a href="#">Menu Item 1</a>
    </li>
    <li class="...." role="tab" aria-expanded="true">
        <a href="#">Menu Item 2</a>
    </li>
</ul>
<div class="ui-tabs-panels">
    <div > ..... </div>
</div>

类菜单定义如下。注释行是我尝试过的行，但给出的结果与要求的不同。

.menu {
    font-family: Open Sans;
    /* first attempt:
    background-size: 5px; 
    background-color: #fff;
    */
    /* second attempt:
    background: linear-gradient(180deg, #FFF 10px, #ebeff2 100%); 
    */  
    /* third attempt: 
    background-color: #fff;
    */
}
.menu ul li {
    background-color: #fff;
    background-image: url(../resources/images/menu_sep.png);
}

输出是这样的：

据我了解，问题在于生成的 html 将我的menu 类应用于<div> 元素，而不是<ul>。有没有办法将这个类添加到<ul> 标签中？我尝试将styleClass="menu" 添加到<p:ajax> 和<p:tab> 标签，但这不起作用。 Primefaces 版本是 3.5。

【问题讨论】：

标签： css jsf primefaces tabview

【解决方案1】：

将样式类应用于<ul /> 元素的一种方法是覆盖默认的TabView 渲染器。但我认为这有点过分了。为什么不将样式类 menu 仅用作锚点，并使用 .menu > ul 之类的 CSS 选择器创建一些样式来设置 <div /> 元素下的列表项的样式，就像您已经对 <li /> 所做的那样.menu ul li 风格的元素？

【讨论】：

成功了！更改了一些属性，如填充和边距，现在的结果正是我想要的。