单击菜单时如何突出菜单

Question

我有一种在 JSF 中创建的菜单。

    <p:menubar styleClass="menuPrincipal" id="menuBar" > 
    <p:menuitem value="Inicio" url="/Inicio.xhtml" style="text-decoration:none"   icon="ui-icon-home" id="inicio" /> 
    <p:menuitem value="Agregar Excepciones" id="agregarExcepcion" url="/ExcepcionNuevo.xhtml" style="text-decoration:none" rendered='#{excepcionPendienteView.usuarioActual.tipoSolicitante eq "Administrador"}' /> 
</p:menubar>

我希望当您单击菜单时，突出显示我正在工作的选项。

如果我单击 "Inicio" 突出显示我的 menuItem Inicio，如果我单击 "Agregar" 突出显示我的 menuItem "Agregar Excepciones"。尝试用Js做，但是我没有做function()。尝试用 ajax 来做，但我发现的例子是使用 blockUit 用 dataTable 做的。

Answer 1

如果您查看此标记 (here) 的文档，您会看到：

url => Url to be navigated when menuitem is clicked.

这就是为什么当您单击某个项目时您的页面会重新加载的原因。删除此属性可能会阻止重新加载操作的发生。

那么您可能需要使用 onclick 或 action 加载页面（并标记菜单项）。或者，如果您使用 AJAX，则可以使用 onstart、oncomplete 和 onsuccess.

单击菜单时如何突出菜单

how stick out a menu when clicking on a menu

css

jsf

primefaces