在包含的导航菜单中将当前页面突出显示为活动链接

Question

我在侧边栏中有一个静态菜单,我在每个JSF页面中都包含它.菜单看起来像这样:

  <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"到<li>亮点的菜单.我如何确保在JSF2中动态突出显示所选项目？

我知道PrimeFaces和RichFaces都有现成的组件,但我想首先尝试一个纯JSF 2解决方案.纯客户端JavaScript解决方案也是可以接受的.

Answer 1

您可以按如下方式获取EL中的当前视图ID

#{view.viewId}

所以,这应该做

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

将某些链接保存在某些链接中更容易,List<Page>这样你就可以做类似的事情

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

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