使用JSP突出显示当前页面链接 [英] Highlighting current page link using JSP

问题描述

我有一个带有某些链接的jsp页面.

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>

我为此写了如下样式

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

当我将其悬停时，颜色会更改，并且当我单击该链接时，将打开该链接的相应页面.之后，它便像以前一样正常.我想在当前页面的链接上应用该样式.我该怎么做?我在后面使用JSP.

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.

推荐答案

在JSP中实现此目的的方式:

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>

您只需要确保您具有正确的路径即可.我建议您直接在页面中输出${pageContext.request.requestURI}，只是为了查看您得到的结果并相应地调整比较.

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.

之后，您只需要声明一个CSS类:

After that you only have to declare one CSS class :

.active > a
{
    color: red;
}

我也建议，使您的所有链接都位于某些List中，并进行迭代以呈现菜单，因为您无需重复该代码.您背后有JSP，可以使用它！

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!

这篇关于使用JSP突出显示当前页面链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！