Javascript 突出显示css菜单栏中当前选定的链接

我有一个包含此URL的页面：

并将下面的内容用作一个简单的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>

当我将鼠标悬停在链接上时，背景颜色会改变，但当前选定的菜单链接不会以蓝色突出显示

我正在使用django framework。

将您的id

#active

替换为class

。active

-这是更正确的方法：

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

并将此类添加到列表中的活动元素：

<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>

它表示活动链接需要活动id。我看不到id，所以它不是蓝色的

---

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

在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>

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

$(function(){

    var url = window.location.href; 

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

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

});

只是

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>

#在每一页中，只需放入此脚本并更改id即可
$（“#page1”）.addClass（'active'）；

我相信您的

localhost

URL对于世界其他地方是不可访问的；）@视觉如果你读了这个问题，那不是重点。@sg3s，是的，但是你怎么知道作者的意思是什么。我们没有足够的HTML来实现这一点。如果“当前选定的菜单链接”与类

活动一起出现，答案很明显，否则可能会有其他问题。@VisioN fair，更多html或直接访问源代码总是有帮助的谢谢。我正在考虑使用javascript添加该功能。但既然你不推荐，我就得想个办法在家里这样做django@John不幸的是，我对django不太熟悉，但通过一个简单的搜索，我找到了这个可能有用的页面：还有一个问题。子弹出现在我的ul列表中。有没有办法让它消失。@约翰：当然，使用
列表样式：无在无序列表中（
ul
）谢谢你，蒂兰卡·德席尔瓦。可笑的简单解决方案，最好的部分是它的工作。我尝试了我所知道的每一个技巧，谷歌，在软件上尝试了被接受的答案，但这颗藏起来的宝石为我做到了。
<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>