单击时如何更改图像链接的css？答案

【问题标题】：how to change css of the image link when clicked?单击时如何更改图像链接的css？
【发布时间】：2011-12-31 04:03:04
【问题描述】：

我有一个 commandLink，里面有一个图形图像，我想更改一些属性链接以显示它已被单击。我找不到用于该目的的内置属性。也许需要一些 javascript 或 css 代码。由于我不太擅长这些，如果有人可以指导我，我会很高兴。谢谢

这是链接的代码。

                    <p:commandLink title="Forward" update="growl"
                        actionListener="#{roombaBean.forward}">
                        <p:graphicImage value="images/but_forward.png" />
                    </p:commandLink>

【问题讨论】：

标签： java javascript css jsf-2 primefaces

【解决方案1】：

您可以向 primefaces graphicsImage 添加一个样式属性，并给它一个来自 bean 的字符串值。单击链接后，您可以使用以下内容更新该字符串值：opacity:0.4:

<p:commandLink title="Forward" update="growl"
                        actionListener="#{roombaBean.forward}">
  <p:graphicImage value="images/but_forward.png" style="#{myBean.myStringStyleValue}" />
</p:commandLink>

对于 IE8 及更早版本，请使用 filter:alpha(opacity=40);

无论如何，我真的不明白你为什么想要这样的东西？你不会离开页面吗？为什么点击图片真的很重要？请，如果您能提供更多信息，我们可以看看是否有更好的解决方案...

【讨论】：

我没有导航到另一个页面，该链接用于控制设备（意思是前进）..单击链接时页面上没有任何反应，因此用户可能会怀疑单击链接是否真的有效。这就是为什么我想在单击过程中更改有关链接的一些内容。
@sogukk 您可以尝试 opacity 解决方案，也可以在通知用户链接已被点击/处理的地方动态显示 primefaces 消息或咆哮。如果您想要一个如何实现咆哮的示例，请告诉我...

【解决方案2】：

使用commandLink 的onclick 事件来执行javascript。像

<p:commandLink onclick="changeCSSInJavascript()" ...> 
.... 
</p:commandLink>

【讨论】：

好的，我们可以使用 on.. 属性更改 css 如下：onclick="this.className='ctlBtn btnDown'"。