当我单击相应按钮时，在 p:tabview 中突出显示选项卡答案

【问题标题】：Highlighting tab in p:tabview when I click a corresponding button当我单击相应按钮时，在 p:tabview 中突出显示选项卡
【发布时间】：2023-03-05 22:37:01
【问题描述】：

我在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>

【问题讨论】：

标签： css jsf-2 primefaces

【解决方案1】：

如果您想避免 ajax 请求，您应该能够使用 jQuery 更改选项卡。为此，您需要为您的 tabView 指定一个 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>

【讨论】：