I would like to make an OR condition in this menu :
<li class="#{facesContext.viewRoot.viewId == ('/company/team.xhtml' or '/company/partnerships.xhtml' ) ? 'active' : '' }"><a class="item" href="company/company.xhtml">Company</a>
<ul>
<li><a href="company/team.xhtml">Team</a></li>
<li><a href="company/partnerships.xhtml">Partnerships</a></li>
</ul>
</li>
That if the team.xthml
or partnerships.xhtml
page are selected by the user the 'active' value would be set it in the <li>
tag.
This is the proper syntax:
<li class="#{facesContext.viewRoot.viewId == '/company/team.xhtml' or facesContext.viewRoot.viewId == '/company/partnerships.xhtml' ? 'active' : '' }">
To make it a bit shorter, you could use #{view}
instead of #{facesContext.viewRoot}
:
<li class="#{view.viewId == '/company/team.xhtml' or view.viewId == '/company/partnerships.xhtml' ? 'active' : '' }">
To make it yet shorter, you could alias the #{view.viewId}
with <c:set>
:
<c:set var="viewId" value="#{view.viewId}" scope="request" />
...
<li class="#{viewId == '/company/team.xhtml' or viewId == '/company/partnerships.xhtml' ? 'active' : '' }">
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With