How to set class="active" to the active page
I'm designing an application in which I'm using jsp pages. Now I need something that indicates which is the current 开发者_开发技巧page that is being displayed. Basically, I want a menu that has for every page, on which I place class=”active” on the current page.
How do I do this? Any suggestions? Thanks!
Kickoff example:
<c:set var="currentPage" value="${fn:substring(pageContext.request.servletPath, 1, -1)}" />
<ul>
<c:forEach items="${bean.menu}" var="item">
<li><a href="${item.link}"${item.link == currentPage ? ' class="active"' : ''}>${item.name}</li>
</c:forEach>
</ul>
This assumes ${bean.menu}
to be a List<Menu>
, the Menu
to be a bean with properties link
and name
and the ${item.link}
to return pathnames like home.jsp
, contact.jsp
(or if you're using a controller servlet, home
, contact
, etc).
The fn:substring()
gets rid of the leading slash. The conditional operator ?:
in EL only prints the class when the condition is true, else nothing.
You should get the current URL
<% String URL = request.getRequestURL(); %>
Then in the menu you could set the class="active" on an element if the current URL (or, retrieving the 'current page' from the url) match the menu element (by title, id...) you want to be "active"
精彩评论