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

Question

我的页面有一个包含一些菜单项的菜单栏。 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" />

Answer 1

根据 URL 突出显示事件菜单:

辅助 Controller 的片段:

    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 ' : ''}" />

使用 anchor 伪类突出显示菜单:

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