使用jQuery將當前URL與UL中的herf匹配，並在匹配時添加類

我有一個動態創建的UL。我想使用jQuery來使用當前的URL，通過指定的UL進行搜索並找到任何具有匹配href的li。如果找到一個，然後添加類「current_page」。使用jQuery將當前URL與UL中的herf匹配，並在匹配時添加類

我想出了這個，但它似乎並沒有辦法。

$(document).ready(function() { 
    $("ul.nav_cat_archiveli").find("a[href='"+window.location.pathname+"']").each(function() { 
     $(this).addClass("current_page"); 
    }); 
});

來源

2010-07-11 Dan

你可以玩window.location將返回當前網頁的網址，也是window.location的

來源

2010-07-11 12:17:40

優秀的href財產！有史以來最快的答案！我將.pathname更改爲.href，它完全按照要求工作。謝謝。 – Dan 2010-07-11 12:21:21

document.location.pathname爲我工作。 window.location.href沒有。 – Lorenzo816 2010-12-07 03:43:16

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 
    <script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      var windowLocationPathname = "/HTMLPage16.htm"; // For testing purpose. 

      //Or 

      //var windowLocationPathname = window.location.pathname; 

      $('ul.nav_cat_archiveli').find('a[href^="' + windowLocationPathname + '"]').addClass('currentPage'); 
     }); 
    </script> 
    <style type="text/css"> 
     .nav_cat_archiveli 
     { 
      list-style: none; 
     } 

     a.currentPage 
     { 
      color: Red; 
      background-color: Yellow; 
     } 
    </style> 
</head> 
<body> 
    <ul class="nav_cat_archiveli"> 
     <li><a href="/HTMLPage14.htm">Test 1 (/HTMLPage14.htm)</a></li> 
     <li><a href="/HTMLPage15.htm">Test 2 (/HTMLPage15.htm)</a></li> 
     <li><a href="/HTMLPage16.htm">Test 3 (/HTMLPage16.htm)</a></li> 
     <li><a href="/HTMLPage17.htm">Test 4 (/HTMLPage17.htm)</a></li>   
    </ul> 
</body> 
</html>

來源

2012-04-24 11:26:25 Thulasiram

現場演示請參閱此鏈接：http://jsfiddle.net/nanoquantumtech/M42nR/ – Thulasiram 2012-04-24 11:27:00

（var windowLocationPathname =「/HTMLPage16.htm」;）這僅用於測試目的。刪除該行使用（var windowLocationPathname = window.location .pathname;） – Thulasiram 2012-04-24 11:28:40

回答

相關問題