我的意图是实现一个带有 onClick 事件的 h:outputLink。 onClick 事件调用一个 javascript 函数,该函数应更改 h:panelGroup (DIV) 的背景颜色。
以下是代码片段:
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
function activate(menuId) {
$(".menu_"+menuId).css( "background", "red" );
}
</script>
..
<h:panelGroup layout="block" id="menu" style="" class="menu_#{menu.id}">
<h:outputLink id="menuLevel0" class="menuLevel0" action="" onclick="activate(#{menu.id})">
..
</h:outputLink>
</h:panelGroup>
如果单击链接,h:panelGroup 后面的 DIV 会将其颜色更改为红色,但会立即再次更改为白色。 (默认背景颜色)。
似乎 DIV 在构建响应期间变红了。并且颜色再次更改为默认值,因为 JSF 呈现页面并丢失 css-change。 这是对正在发生的事情的正确解释吗?
我现在的问题是,如何“永久”更改h:panelGroup 的颜色?
提前致谢。
最佳答案
您的 div
背景为红色,但随后您的链接的正常操作由浏览器进行,即导航至服务器。环回完成后,您将失去背景颜色。
要使其按您希望的方式工作,您需要告诉浏览器在单击链接时不要启动 HTTP 请求。您可以简单地:
<h:outputLink id="menuLevel0" class="menuLevel0" action="" onclick="activate('#{menu.id}'); return false;" >
关于javascript - JSF2.0 - CSS-Change 在生命周期中丢失,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19244107/