0

次の URL のページがあります: http://localhost:8000/progress/c/?l=1&c=1

そして、以下のコンテンツは単純な css メニュー バーとして機能します。

<div class="menu_div">
    <ul>
        <li><a href="/progress/c/?l=1&c=1"> l1c1 </a></li>
        <li><a href="/progress/c/?l=2&c=1"> l1c1 </a></li>
        <li><a href="/progress/c/?l=3&c=1"> l1c1 </a></li>
        <li><a href="/progress/c/?l=4&c=1"> l1c1 </a></li>
    </ul>
</div>

CSSスタイリングは

.menu_div ul
{
    padding:6px;
    margin:0px;
    font-size:12px;
    list-style:none;
    text-indent:15px;

}
.menu_div ul li
{
    line-height:28px;
    border-bottom:1px solid #000;
}
.menu_div ul li a
{
    text-decoration:none;
    font-color:#3A332D;
    display:block;
}
.menu_div ul li a:hover
{
    background:blue;
}
.menu_div ul li#active
{
    background:blue;
}

リンクにカーソルを合わせると、背景色が変わりますが、現在選択されているメニュー リンクが青色で強調表示されません。

私はdjangoフレームワークを使用しています。

4

5 に答える 5

5

このjQueryコードを試してみてください。クラスが自動的に追加されます

$(function(){

    var url = window.location.href; 

    $("#menu a").each(function() {

        if(url == (this.href)) { 
            $(this).closest("li").addClass("active");
        }
    });

});
于 2013-08-05T10:32:03.700 に答える
2

あなたの CSS には、ID が「active」のクラスがあります。これは、おそらく次のようなクラスである必要があります。

.menu_div ul li.active
{
    background:blue;
}

さらに、javascript クライアント側を使用して、「アクティブな」ページまたはより適切に定式化された「現在の」ページを一致させようとすることはお勧めしません。

代わりに、サーバー上のスクリプトは現在のページを認識し、関連するメニュー項目にクラスを追加する必要があるため、次のようになります。

<li class="active"><a href="/progress/c/?l=1&c=1"> l1c1 </a></li>
于 2012-04-29T18:06:25.497 に答える
0

Replace your id #active to class .active - that is more right way:

.menu_div ul li.active
{
    background:blue;
}

and add this class to active element in your list:

<div class="menu_div">
    <ul>
        <li class="active"><a href="/progress/c/?l=1&c=1"> l1c1 </a></li>
        <li><a href="/progress/c/?l=2&c=1"> l1c1 </a></li>
        <li><a href="/progress/c/?l=3&c=1"> l1c1 </a></li>
        <li><a href="/progress/c/?l=4&c=1"> l1c1 </a></li>
    </ul>
</div>
于 2012-04-29T18:05:16.260 に答える
0 
.menu_div ul li#active

It says the active link needs an id of active. I see no id, hence why it is not blue.

If you want the link to be active, you are going to have to set the item to be active, the browser will not do it for you.

于 2012-04-29T18:05:24.590 に答える