Question

我有一个jsp页面，里面有一些链接。

<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。

Answer 1

这样做的方法是在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}，以查看获得的内容并相应地调整比较。

之后你只需声明一个CSS类：

.active > a
{
    color: red;
}

我还建议您将所有链接放在某些List中并进行迭代以呈现您的菜单，因为您不需要重复该代码。你有JSP背后，使用它！

Answer 2

试试这个

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

替代jquery解决方案

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

现在你可以添加css

了

.activelink{color:red;}

使用JSP突出显示当前页面链接

2 个答案: