我有一个 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;
}
当我将其悬停时,颜色会发生变化,当我单击该链接时,该链接的相应页面将打开。之后就和以前一样正常了。我想在链接上应用该样式current页。我该怎么做?我后面用的是JSP。
方法是在 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;
}
I also suggest你在某些地方拥有你的所有链接List
并进行迭代来渲染菜单,因为您不需要重复该代码。你后面有JSP,使用它!
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)