Question

我具有以下用于显示菜单和突出显示当前活动菜单的代码：

$(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代码时，提到的页面的导航失败。我尝试同时使用网址和结果。活动菜单的高亮显示进行得很好。 BUT导航到提到的URL失败。

请让我知道我在这里想念的东西。

Answer 1

以下使用 view.viewId 并具有条件运算符来设置JSF EL中的 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>

Answer 2

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

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

JSF Primefaces-如何突出显示当前选择的p：menuitem。

2 个答案: