使用RichFaces jquery将另一个类添加到选项卡

Question

我有一个rich:tabPanel，里面有几个选项卡。我想使用jquery记录每个选项卡上的更改，这样当选项卡中发生更改时，我就会更改该选项卡的背景图像。

它看起来是这样的：

<h:form id="form">
    <rich:jQuery selector="#tab1_lbl" query="addClass('testClass')" timing="onload"/>
        <rich:tabPanel switchType="client" id="tabContainer">
            <rich:tab id="tab1" label="tab1" title="tab1" >
                 tab1
            </rich:tab>

            <rich:tab id="tab2" label="tab2">
                 tab2
            </rich:tab>
       </rich:tabPanel>
</h:form>

我让选择器说#tab_lbl的原因是因为从这里生成的html看起来像这样：

<td id="form:tab1_lbl" class="dr-tbpnl-tb rich-tab-header dr-tbpnl-tb-act rich-tab-active " title="tab1" onmouseout="RichFaces.outTab(this);" onmouseover="RichFaces.overTab(this);">
tab1
</td>

现在我也尝试指定选择器，比如这个selector="#form:tab_lbl“，但是我仍然无法将这个类添加到这个td元素中。这有什么原因吗？如果我在不使用richfaces tabPanel的情况下创建一个新表，我可以很容易地使用这种方法来添加具有相同选择器的类，但在本例中不起作用。

有什么想法吗？

编辑:我想补充说，如果我使用firebug并手动添加类，我会得到我正在寻找的结果。

Answer 1

如果rich:jQuery能够将ID与组件相匹配，它将为您找到正确的ID。在Richfaces Developer Guide中：

定义选择器时，RichFaces会检查其内容，如果找到选择器id中定义的，则会尝试将其替换为组件id。

另请看给出的示例，了解何时需要指定确切的ID：

<rich:jQuery selector="#form\\:menu img" query="..." />

(注意双反斜杠以转义冒号)

您可以使用#tab1作为选择器，rich:jQuery会用正确的ID替换它，但是这会找到选项卡，而您需要的是选项卡标签。

因此，查找标签的一种更健壮的方法(健壮的是，如果您移动页面或给表单一个id，它仍然可以工作)将是查找选项卡，然后找到选项卡的孩子，即标签。因此，一个可能的选择器是：

#tab1/../td.rich-tab-header