在CSS菜单栏中突出显示当前选中的链接

Question

我有一个使用此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框架。

Answer 1

试试这个jQuery代码，它将自动添加类

$(function(){

    var url = window.location.href; 

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

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

});