更新类属性根据网页网址

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> 

而不是手工代码类=“活动”不同的每一页，我我想尝试一下这样的脚本，该脚本根据锚点是否为当前URL，自动将类插入到li标记中。

有人知道我可能会开始吗？

Answer 1

你可以从

window.location.pathname 

看到this更多细节得到当前的URL路径。

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

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

希望帮助

Answer 2

试试这个代码：

$('.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> 
    } 
});