jQuery當前頁面突出顯示

Question

如何使用jQuery來突出顯示當前頁面？換句話說，將「當前」類添加到當前頁面的一個元素。

這裏是我的代碼：

<div id="nav"> 
     <ul> 
      <li><a href="../articles/">Articles</a></li> 
      <li><a href="../photos/">Photos</a></li> 
      <li><a href="../info/">Earthquake Info</a></li> 
     </ul> 
    </div> 

我研究過幾種不同的方法，但其中大部分依靠鏈接到的網頁（即articles.html），而不是目錄（即../articles/）。

我見過body/ID類的方法，並希望自動jQuery解決方案。

Here's my site。

Answer 1

你可以用document.location.href來做到這一點，並分割字符串。

在你的元素中運行一個循環，將它們與拆分後的字符串進行比較並將類添加到右側。

Answer 2

this應該排序。
你可能需要稍微調整它才能使用文件夾。

Answer 3

這就是我如何在我的個人網站上做到的。 （鏈接Here）

<ul id="navLinks"> 
    <li><a id="homeLink" href="/">Home</a></li> 
    <li><a id="blogLink" href="/blog/">Blog</a></li> 
    <li><a id="photosLink" href="/photo-gallery/">Photos</a></li> 
    <li><a id="portfolioLink" href="/portfolio/">About Me</a></li> 
    <li><a id="contactLink" href="/contact/">Contact</a></li> 
</ul> 



var section = window.location.pathname; 

if (section == '/') { $('#homeLink').attr('class', 'selected'); } 
if (section.substring(0, 5) == "/blog") { $('#blogLink').attr('class', 'selected'); } 
if (section.substring(0, 9) == "/articles") { $('#blogLink').attr('class', 'selected'); } 
if (section.substring(0, 8) == "/contact") { $('#contactLink').attr('class', 'selected'); } 
if (section.substring(0, 14) == "/photo-gallery") { $('#photosLink').attr('class', 'selected'); } 
if (section.substring(0, 10) == "/portfolio") { $('#portfolioLink').attr('class', 'selected'); } 

Answer 4

雖然我無法找到一個jQuery的解決方案，我沒有找到一個不錯Javascript alternative。