javascript - 根据页面 URL 更新类属性

Question

我有这段代码，其中事件菜单项与其他菜单项具有不同的样式:

<div class="menu">
<li class="active"><a href="item1.php">Item 1</a></li>
<li><a href="item2.php">Item 2</a></li>
<li><a href="item3.php">Item 3</a></li>
</div>

我不想为每个页面手动编写不同的 class="active"代码，而是想使用一个脚本来尝试此操作，该脚本会根据 anchor 是否为当前 URL 自动将类插入到 li 标记中。

有人知道我该如何开始吗？

Answer 1

你可以从

获取当前的url路径名

window.location.pathname

参见 this了解更多详情。

一旦知道路径名，就可以将事件类设置为正确的链接，如下所示。

$(".menu li a").each(function(){
   if(window.location.pathname == $(this).prop("href")){
        $(.menu li).removeClass("active");     
        $(this).closest("li").addClass("active");
   }
});

希望对你有帮助