JSF2.0 - CSS-Change 在生命周期中丢失答案

【问题标题】：JSF2.0 - CSS-Change is getting lost during lifecycleJSF2.0 - CSS-Change 在生命周期中丢失
【发布时间】：2013-10-15 03:55:54
【问题描述】：

我的意图是实现一个带有 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 更改。这可能是对正在发生的事情的正确解释吗？

我现在的问题是，如何“永久”更改 h:panelGroup 的颜色？

提前致谢。

【问题讨论】：

标签： javascript css jsf-2 onclick

【解决方案1】：

您的div 获得红色背景，但随后您的链接的正常操作由浏览器进行，即导航到服务器。环回完成后，您将失去背景颜色。

要使其按您希望的方式工作，您需要告诉浏览器在单击链接时不要启动 HTTP 请求。你可以简单地：

<h:outputLink id="menuLevel0" class="menuLevel0" action="" onclick="activate('#{menu.id}'); return false;" >

【讨论】：

感谢您的回答。不幸的是，我需要 HTTP 请求。我的实现背后的想法是，菜单是在服务器端构建的。如果单击菜单项（链接），则将索引（URL 参数）发送到服务器，并再次生成有关该索引的菜单。为了激活或更好地突出所选菜单项，我希望客户端为其处理颜色。一个想法是也处理服务器端的颜色。在这种情况下，我不必担心消失的颜色。我不知道当客户处理颜色时它会如何正常工作。
使用 css 类并在 jsf 中的正确链接上动态应用该类