JSF Primefaces - 如何突出显示当前选定的 p:menuitem。答案

【问题标题】：JSF Primefaces - How to highlight the current selected p:menuitem.JSF Primefaces - 如何突出显示当前选定的 p:menuitem。
【发布时间】：2018-08-11 05:27:47
【问题描述】：

我有以下代码，用于显示菜单并突出显示当前活动菜单：

$(document).on("click", "#menu\\:panelMenu li a",function (e) {
   	e.preventDefault();
	$('#menu\\:panelMenu li a').removeClass("active");
	$(this).addClass('active');
   });

.active {
    color: #D09d23;
    font-weight: bold;
    background-color : #c7c3c3;
}

 <h:form id="menu">
      <p:menu style="width:100%" id="panelMenu">
         <p:menuitem value="Customer" 
          outcome="/secure/customerdetail.xhtml?customerId=#{controller.customerid}" ajax="false"  id="custMenu"/>
         <p:menuitem value="User" outcome="/secure/userlist.xhtml?customerId=#{controller.customerid}" ajax="false" id="userMenu" />
      </p:menu>
    </h:form>

但是当我包含用于添加 css 类的 JS 代码时，所提到的页面的导航无法发生。我尝试同时使用 url 和结果。活动菜单的亮点正在发生。但是导航到提到的 url 失败。

请让我知道我在这里缺少什么。

【问题讨论】：

错误是什么？
控制台没有错误，只是点击 User ，高亮出现但页面没有导航。
你检查浏览器控制台了吗？
是的，我确实在那里检查过.. 没有显示错误。
这里有一个解决方案stackoverflow.com/questions/11094429/…

标签： jsf primefaces

【解决方案1】：

在 JSF EL 中使用 view.viewId 并使用条件运算符设置 styleClass 的以下检查突出显示了当前活动菜单：

<h:form id="menu">
  <p:menu style="width:100%" id="panelMenu">
    <p:menuitem value="Customer" url="/secure/customerdetail.xhtml?customerId=#{controller.customerid}" ajax="false" id="custMenu" styleClass="#{view.viewId.contains('customerdetail') ? 'active' : ''}" />
    <p:menuitem value="User" url="/secure/userlist.xhtml?customerId=#{controller.customerid}" ajax="false" id="userMenu" styleClass="#{view.viewId.contains('userlist') ? 'active' : ''}" />
  </p:menu>
</h:form>

【讨论】：

【解决方案2】：

您应该从 javascript 函数中删除 e.preventDefault();。在函数的description 中，它说；

如果调用此方法，则事件的默认动作不会触发。

【讨论】：

谢谢@mismanc。在我删除了这个 JS Func 之后，重定向工作了。但是活动菜单突出显示似乎没有发生，猜测一旦我重定向到不同的 url 就不会应用样式.. 指的是 $(this) 正确吗？我的意思是当我单击菜单项和页面导航之前应用样式，但是一旦页面被导航，应用的样式就会丢失..
@PreethiRajaraman 如果您重定向页面，只需静态提供 active 类。所以不需要javascript函数。我不知道，可能还有其他方法。
你是说我需要在中给出类似 styleClass="active" 的内容吗？那不会解决我的情况，因为我需要删除之前单击的所有其他菜单项上的活动类，并在当前单击的菜单项上应用活动样式，以便仅突出显示当前菜单项。
您的菜单是否存在于每个页面中？添加 styleClass="active" 合适的菜单项页面组合。
我在上面添加了对我来说很好的答案。我使用 view.viewId 和条件检查来设置 styleClass。