изменить стиль менюItem при нажатии в меню IceFacesBar

Question

На моей странице есть меню, в котором есть некоторые элементы меню. Элементы menu выделяются при наведении курсора мыши, но мне нужно выделить его, как только его щелкнули, как в tabView.

<ace:menuBar id="menuBarHeader" autoSubmenuDisplay="true" 
      styleClass="menue"> 
      <ace:menuItem id="menuItemStart" value="Start" 
       icon="ui-icon ui-icon-home" url="/layouts/welcome.xhtml" 
       styleClass="menu" /> 

Answer 1

Выделите активное меню на основе URL:

Фрагмент хелперов контроллера:

public String getActiveMenu() { 
     final String url = FacesContext.getCurrentInstance().getExternalContext().getRequestServletPath(); 
     String activeMenu = url.replaceAll("/screens/([^/]+)/.*", "$1"); 
     // exceptions (not standard urls) 
     if (isHomeMenuActive(activeMenu)) { 
      activeMenu = "home"; 
... 

XHTML:

меню

<ace:menuItem id="menuItemStart" value="Start" 
       icon="ui-icon ui-icon-home" url="/layouts/welcome.xhtml" 
       styleClass="menu #{menuHighlightController.activeMenu eq 'home' ? 'menuActiveItem ' : ''}" /> 

Выделение с использованием анкерных псевдо-классов:

.menuItem{ 
a:link{ 
    background-color:blue; 
} 
a:visited{ 
    background-color:purple; 
} 
a:hover{ 
    background--color:orange; 
} 
a:focus{ 
    background-color:green; 
} 
a:active{ 
    background-color:red; 
} 
} 

Highlight с использованием Java Script:

XHTML:

<ace:menuItem id="menuItemStart" value="Start" onclick="changeColor();" 
        icon="ui-icon ui-icon-home" url="/layouts/welcome.xhtml" 
        styleClass="menu" /> 

JS:

function changeColor(){ 
    $(this).toggleClass("active-menu") 
}