突出显示活动菜单项

Question

我有一个列表创建的菜单。我希望能够突出显示当前的菜单项。

使用此脚本，我可以匹配url的最后一位（最后一个/后面的所有内容），但我需要该脚本与url中的前两个文件夹匹配。因此，而不是index.html，我想抓住/folder1/folder2/index.html。

$(function() { 
    var url = window.location.href.substr(window.location.href.lastIndexOf("/") + 1); 
    $(".nav li a").each(function() { 
     //console.log(url); 
     if ($(this).attr("href") == url) $(this).parent().addClass("active"); 
    }); 
}); 


//Markup: 

<ul id="nav"> 
     <li><a href="/folder1/folder2/index.html">Home</a></li> 
     <li><a href="/folder1/folder2/about.html">About</a></li> 
     <li><a href="/folder1/folder2/contact.html">Contact</a></li> 
</ul> 

如何修改脚本以匹配url的更多部分？

Answer 1

这个应该工作：

$(function() { 
    var url = window.location.href.substr(window.location.href.lastIndexOf("/") + 1); 
    $('[href$="'+url+'"]').parent().addClass("active"); 
});