css - Primefaces - 更改 tabView 选项卡的背景

Question

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

我正在添加 styleClass xhtml 中的属性。 (写“...”而不是一长串与问题无关的属性值。)

<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 仅作为 anchor 并使用 css 选择器创建一些样式，如 .menu > ul为 <div /> 下的列表项设置样式元素就像您已经对 <li /> 所做的那样元素与你的 .menu ul li风格？