4

いくつかのリンクを含む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を使用しています。

4

2 に答える 2

12

その方法は 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 クラスを 1 つだけ宣言する必要があります。

.active > a
{
    color: red;
}

また、そのコードを繰り返す必要がないため、すべてのリンクをいくつかにまとめてメニューをレンダリングする反復を行うことをお勧めします。List背後に JSP があります。それを使用してください。

于 2013-06-10T06:32:00.817 に答える
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;}
于 2013-06-10T05:57:18.813 に答える