添加一個活躍的css類與jQuery導航

嗨，所有我正在尋找一個簡單的不顯眼的方式來添加一個class =「active」到一個無序列表菜單基於它的目錄。不幸的是，我不能添加一個自定義類到body標籤，所以我無法使用純CSS解決方案。添加一個活躍的css類與jQuery導航

任何人都可以指點我一個很好的教程 - 我看過但找不到符合我需要的教程。代碼看起來像這樣，我只需要添加基於/目錄/或/一個jquery解決方案的類將是理想的，因爲我已經加載jQuery庫。

<ul class="nav"> 
<li><a href="/index.html">Home</a></li> 
<li><a href="/about/about.html">About Us</a></li> 
<li><a href="/cv/submit-your-cv.html">Submit CV</a></li> 
<li><a href="/vacancies/index.html">Vacancies</a></li> 
<li><a href="/news/news.html">Company News</a></li> 
<li><a href="/praise/praise.html">Praise</a></li> 
<li class="nosep"><a href="/contact/contact.html">Contact Us</a></li> 
</ul>

來源

2010-02-13 toomanyairmiles

試試這個：

$(".nav li:has(a[href$='"+window.location.pathname+"'])").addClass("active");

來源

2010-02-13 15:50:22

你好尼克，這是偉大的，但它似乎失敗的索引頁？任何想法使這項工作？ – toomanyairmiles 2010-02-13 17:19:40

問題似乎是，當用戶訪問/而不是/index.html時，不會顯示活動類，如果有任何其他頁面被稱爲index.html，則腳本會複製活動類。 – toomanyairmiles 2010-02-13 17:26:16

@toomanyairmiles - 是否使URL成爲絕對選項，或者你知道完整路徑是什麼？ – 2010-02-13 17:47:34

你可以看看window.location變量併爲每個li元素設置一個id。然後是這樣的：

$("...").addClass("myCssClass");

希望它可以幫助以某種方式...

來源

2010-02-13 15:48:49 dale

希望這有助於你的概念將有一個輸出對每個變色特定頁面

var wo = window.location.pathname;

jQuery的（「ul.nav利A」）各（函數（）{ VAR thisvar = jQuery的（本）; 變種IFID = jQuery的（本）.attr（的「href」）;

if(ifid == wo){ 

     switch(ifid){ 
      case "/index.html": 
      thisvar.css("color","#000000"); 
      break; 
      case "/about/about.html": 
      thisvar.css("color","#EE2E24"); 
      break; 

}

} }）;

如果你喜歡這篇文章，你也可以訪問它http://linesforme.blogspot.com

來源

2011-03-08 09:34:55

添加一個活躍的css類與jQuery導航

回答

相關問題