Highlight current page link using JSP

Question

I have a jsp page with some links in it.

<div id="menu"> <span></span> <ul class="nav"> <li class="top_border"></li> <li class="item3"><a href="">Polos</a></li> <li class="item4"><a href="">Blouses</a></li> <li class="item5"><a href="">Sweaters</a></li> <li class="item6"><a href="">Pants </a></li> <li class="item7"><a href="">Jeans</a></li> <li class="item8"><a href="">Jackets</a></li> <li class="item9"><a href="">Footwear</a></li> </ul> </div> 

I wrote a style for this below

 ul.nav li a:hover { background: #ebebeb url(images/border.png) no-repeat; color: red; padding: 7px 15px 7px 30px; } 

When I find it, the color changes, and when I click on this link, the corresponding page for this link opens. After that, it becomes normal, as before. I want to apply this style to the link to the current page. How can I do it? I am using JSP.

Answer 1

The way to do this is in JSP:

 <div id="menu"> <span></span> <ul class="nav"> <li class="top_border"></li> <li class="item3${pageContext.request.requestURI eq 'path/polos.jsp' ? ' active' : ''}"><a href="path/polis.jsp">Polos</a></li> <li class="item4${pageContext.request.requestURI eq 'path/blouses.jsp' ? ' active' : ''}"><a href="path/polis.jsp">Blouses</a></li> <li class="item5${pageContext.request.requestURI eq 'path/sweaters.jsp' ? ' active' : ''}"><a href="path/sweaters.jsp">Polos</a></li> <li class="item6${pageContext.request.requestURI eq 'path/pants.jsp' ? ' active' : ''}"><a href="path/sweaters.jsp">Pants</a></li> <li class="item7${pageContext.request.requestURI eq 'path/jeans.jsp' ? ' active' : ''}"><a href="path/sweaters.jsp">Jeans</a></li> <li class="item8${pageContext.request.requestURI eq 'path/jackets.jsp' ? ' active' : ''}"><a href="path/sweaters.jsp">Jackets</a></li> <li class="item9${pageContext.request.requestURI eq 'path/footwear.jsp' ? ' active' : ''}"><a href="path/sweaters.jsp">Footwear</a></li> </ul> </div> 

You just need to make sure that you have the right paths. I suggest that you directly output ${pageContext.request.requestURI} to your page to see what you are getting and adjust the comparisons accordingly.

After that, you need to declare only one CSS class:

 .active > a { color: red; } 

I also suggest having all your links in some List and iterating to display your menu, since you do not need to repeat this code. You have a JSP, use it!

Answer 2

try it

 ul.nav li a:visited { color: red;/* you can keep your original color*/ } 

Alternative solution for jQuery

 $('.nav li a').on('click', function() { $('.active').removeClass('activelink'); $(this).addClass('activelink'); }); 

Now you can add css

 .activelink{color:red;}