在包含的导航菜单中将当前页面突出显示为活动链接 [英] Highlighting current page as active link in included navigation menu

问题描述

我在侧边栏中有一个静态菜单，包含在每个 JSF 页面中.菜单如下所示:

I have a static menu in the sidebar which I include in every JSF page. The menu looks like so:

  <li class="nav-header">Item 1</li>
  <li class="active"><a href="index.xhtml">Item 2</a></li>
  <li><a href="new_workload.xhtml">Item 3</a></li>
  <li><a href="import_workload.xhtml">Item 4</a></li>

将 class="active" 添加到

突出显示菜单.如何确保在 JSF2 中动态突出显示所选项目?

Adding a class="active" to the <li> highlights the menu. How do I go about making sure selected item is highlighted dynamically in JSF2?

我知道 PrimeFaces 和 RichFaces 已经为此准备了组件，但我想先尝试纯 JSF 2 解决方案.纯客户端 JavaScript 解决方案也是可以接受的.

I know PrimeFaces and RichFaces have ready made components for this, but I want to try a pure JSF 2 solution first. A pure client side JavaScript solution is also acceptable.

推荐答案

可以在EL中获取当前视图ID如下

You can get the current view ID in EL as follows

#{view.viewId}

所以，应该这样做

class="#{view.viewId eq '/index.xhtml' ? 'active' : ''}"

将所有这些链接保存在某个 List 中会更容易，这样您就可以执行类似的操作

It'd be easier to hold all those links in some List<Page> so that you can just do something like

<li class="nav-header">#{menu.header}</li>
<ui:repeat value="#{menu.pages}" var="page">
    <li class="#{view.viewId eq page.viewId ? 'active' : ''}">
        <h:link value="#{page.title}" outcome="#{page.viewId}" />
    </li>
</ui:repeat>

而不是一遍又一遍地复制粘贴同一段代码.

instead of copypasting the same piece of code over and over.

这篇关于在包含的导航菜单中将当前页面突出显示为活动链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！