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 
.menu_div ul li#active

它说活动链接需要一个活动的ID。我看不到 id，因此它不是蓝色的。

如果您希望链接处于活动状态，则必须将项目设置为活动状态，浏览器不会为您执行此操作。

于 2012-04-29T18:05:24.590 回答
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

只是

css

.menu_div ul li.active{background:blue}

html

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

脚本

#In every page just put this script and change the id
<script>$("#page1").addClass('active');</script>
于 2013-08-05T11:01:14.877 回答