Highlighting 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 have written style for this one as below

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

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

Answer 1

The way for that is doing it 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 will have to just be sure you have the right paths. I suggest that you output directly ${pageContext.request.requestURI} in your page just to see what you get and adjust comparisions accordingly.

After that you only have to declare one CSS class :

.active > a
{
    color: red;
}

I also suggest you to have all your links in some List and do an iteration to render your menu since you don't need to repeat that code. You have JSP behind, use it!