Web applications 按下时突出显示命令按钮jsf 2.1

我正在使用JSF2.1编写一个web应用程序。我想使用2个按钮，带我到两个不同的观点通过一个参数。但是默认情况下，我有一个按钮被“按下”，因此它应该在视图中被“按下”。我怎样才能表现出这种行为？下面是我有两个按钮的一小段代码：

                                    <h:outputLabel value="Color:" />
                                    <!--blue button is highlighted as pressed by default -->
                                    <h:commandButton  value ="blue" action="#{bean.update}" >
                                        <f:setPropertyActionListener target="#{bean.color}" value="blue" />
                                    </h:commandButton>

                                    <!--green button is highlighted as pressed when clicked -->
                                    <h:commandButton value ="green" action="#{bean.update}" >
                                            <f:setPropertyActionListener target="#{bean.color}" value="de" />
                                    </h:commandButton>

---

您可以向h:commandButton添加任何样式，就像添加普通按钮一样。例如，要使按钮有禁用的感觉，您可以在默认情况下设置第一个按钮的不透明度

<h:commandButton  value ="blue" action="#{bean.update}" 
                  style="opacity: 0.65" >
                 <f:setPropertyActionListener target="#{bean.color}" value="blue" />
</h:commandButton>

要更改第二个按钮的类别，可以使用onClick函数向按钮添加新的css样式：

<h:commandButton value ="green" action="#{bean.update}" onClick="$(this).addClass("pressedButtonStyle")" >
    <f:setPropertyActionListener target="#{bean.color}" value="de" />
</h:commandButton>

如果要在返回页面后保持按钮的状态，可以根据以下条件应用这些类：

<h:commandButton  value ="blue" action="#{bean.update}" style="opacity : #{bean.color eq 'blue' ? 0.65 : 1}">
      <f:setPropertyActionListener target="#{bean.color}" value="blue" />
</h:commandButton>

<!--green button is highlighted as pressed when clicked -->
<h:commandButton value ="green" action="#{bean.update}"  style="opacity : #{bean.color eq 'de' ? 0.65 : 1}" >
      <f:setPropertyActionListener target="#{bean.color}" value="de" />
</h:commandButton>

谢谢库布！只是一个疑问。我需要在默认情况下按下蓝色按钮，并根据默认情况呈现其动作。我如何显示它？那么你的意思是当用户进入页面时，默认情况下会自动单击蓝色按钮并执行所需操作吗？事实上，我在init（）中将bean.color设置为蓝色，因此我希望看到在初始视图中按下按钮。你可以使用javascript来执行此操作。您需要为按钮提供一个id，并使用该id可以使用javascript模拟单击事件。window.onload=function（）{document.getElementById（'idOfYourButton'）。单击（）；}

<h:commandButton  value ="blue" action="#{bean.update}" style="opacity : #{bean.color eq 'blue' ? 0.65 : 1}">
      <f:setPropertyActionListener target="#{bean.color}" value="blue" />
</h:commandButton>

<!--green button is highlighted as pressed when clicked -->
<h:commandButton value ="green" action="#{bean.update}"  style="opacity : #{bean.color eq 'de' ? 0.65 : 1}" >
      <f:setPropertyActionListener target="#{bean.color}" value="de" />
</h:commandButton>