突出顯示活動菜單項

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"); 
});