Question

我的页面有一个menuBar，它有一些menuItems。 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

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

辅助控制器的片段：

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

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

1 个答案: