css - 在IceFaces menuBar中单击时更改menuItem的样式

我的页面有一个menuBar，其中包含一些menuItems。该菜单项在鼠标悬停时突出显示，但是我需要像在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" />

最佳答案

根据网址突出显示活动菜单：

助手控制器的片段：

    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;
}
}

使用Java脚本突出显示：

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")
}

关于css - 在IceFaces menuBar中单击时更改menuItem的样式，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/32710562/