Css 单击相应按钮时高亮显示p:tabview中的选项卡

我正在

p:tabview

中使用多个选项卡。除此之外，我还有一系列静态图像（如进度条），因此当我单击第一个图像时，它会继续突出显示第一个选项卡，依此类推

<h:form>
<h:commandLink action="#tab1">
<h:graphicImage src="image1"/>
</h:commandLink>
<p:tabView>
<p:tab title="tab1" id="tab1">
<ui:include src="some.xhtml></ui:include>
</p:tab>
.
.
.
.
</p:tabview>
<h:form>

如果要避免ajax请求，应该能够使用jQuery更改选项卡。为此，需要为选项卡视图指定一个widgetVar

<p:tabView id="tabView" widgetVar="tabViewVar">
....
</p:tabView>


....

使用这种方法，您只能使用图像

<h:graphicImage value="image1" onclick="jQuery(jQuery(tabViewVar.jqId + " li[role=tab] a").get(0)).trigger("click");" />
<h:graphicImage value="image2" onclick="jQuery(jQuery(tabViewVar.jqId + " li[role=tab] a").get(1)).trigger("click");" />
<h:graphicImage value="image3" onclick="jQuery(jQuery(tabViewVar.jqId + " li[role=tab] a").get(2)).trigger("click");" />
...


...

如果您不介意额外的ajax请求，可以按如下方式执行：

<p:commandLink action="#{tabViewBean.submit}" process="@this" update="tabView">
            <h:graphicImage value="image1" />
            <f:setPropertyActionListener value="0" target="#{tabViewBean.activeIndex}" />
        </p:commandLink>
<p:commandLink action="#{tabViewBean.submit}" process="@this" update="tabView">
            <h:graphicImage value="image2" />
            <f:setPropertyActionListener value="1" target="#{tabViewBean.activeIndex}" />
        </p:commandLink>
<p:commandLink action="#{tabViewBean.submit}" process="@this" update="tabView">
            <h:graphicImage value="image3" />
            <f:setPropertyActionListener value="2" target="#{tabViewBean.activeIndex}" />
        </p:commandLink>