在随附的导航菜单中将当前页面突出显示为活动链接 [英] 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>

在<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<Page>中会更容易，这样您就可以做类似的事情

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屋！