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" 不同的代码，而是使用一个脚本来尝试这个，该脚本会根据锚点是否是当前 URL 自动将类插入到 li 标记中。

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

Answer 1

试试这个代码：

$('.menu li a').each(function(){ //check thru all <a> elements inside <li> inside .menu

  var pagename= location.pathname.split('/').pop(); // get current pages filename (just filename)

    if($(this).prop("href") == pagename){
        $('.menu li').removeClass("active"); // remove all active class    
        $(this).parent("li").addClass("active"); //put active in parent of <a> which is <li>
   }
});

Answer 2

您可以从中获取当前的 url 路径名

window.location.pathname

有关更多详细信息，请参阅此。

知道路径名后，您可以将活动类设置为正确的链接，如下所示。

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

希望有帮助