Question

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

Answer 1

如果你想避免ajax请求，你应该能够使用jQuery更改标签。为此，您需要为tabView指定一个widgetV。

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

单击相应按钮时突出显示p：tabview中的选项卡

1 个答案: