Primefaces - 更改tabView选项卡的背景

Question

我正在使用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。

Answer 1

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