Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
2.1k views
in Technique[技术] by (71.8m points)

jsf - Highlighting current page as active link in included navigation menu

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>

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

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.

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

You can get the current view ID in EL as follows

#{view.viewId}

So, this should do

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

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.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...