Javascript獲取當前頁面並根據URL添加類到一個元素

我正在使用導航欄，並且我想在元素的頁面上有元素的活動類。Javascript獲取當前頁面並根據URL添加類到一個元素

舉例來說，我需要jQuery來檢查當前網頁的網址，而且如果網址是http://supjamess.tumblr.com/，它會在類active添加到a元素.index，http://supjamess.tumblr.com/ask &它會添加類active到a元素.ask等等。

如果任何人都可以提供代碼，它會非常有幫助。

來源

2012-07-06 James Charless Dickinson

*選擇，他的決定不是我的錯，謝謝你的減號2.不成熟... – Austin 2012-07-06 22:53:27

我簡單根據我將解決問題的方式爲問題提供瞭解決方案。我也解釋了爲什麼我選擇在我的回答的評論中使用這種方法。你有權獲得你的意見，但這並不意味着我錯了，我也不應該得到一個倒退。 – Austin 2012-07-06 23:00:14

開關關閉基礎的location.pathname

if (location.pathname == "/") { 
     $("a.index").addClass("active"); 
} else if (location.pathname == "ask") { 
     $("a.ask").addClass("active"); 
} 
... and so on

其他頁面與其他額外添加的if語句，所以代碼變成：

if (location.pathname == "/") { 
     $("a.index").addClass("active"); 
} else if (location.pathname == "/ask") { 
     $("a.ask").addClass("active"); 
} else if (location.pathname == "/tagged/layout") { 
     $("a.layout").addClass("active"); 
} else if (location.pathname == "/YOUR PATH") { // to add aditional pages, replace CAPS 
     $("a.CLASS OF NAV LINK").addClass("active"); 
}

您可以嘗試和試驗上的jsfiddle的JavaScript .net，或在你自己的控制檯（大多數瀏覽器的f12）

來源

2012-07-06 01:10:28 Austin

這可能會變得非常長...... – 2012-07-06 01:14:56

的確，這與我用於在Backbone應用程序中路由我的URL的方式類似。好處是，如果我需要對目錄有相同的內容，我可以使用search（），如下所示： if（location.pathname.search（/^\/admin/=== 0））{admin部分} – Austin 2012-07-06 01:18:44

@Austin你能爲我完成這段代碼嗎？我是新來的JavaScript，我不太明白。 /是a.index，/ ask是a.contact，/ tagged/themes是a.layouts，就是這樣。非常感謝！！ – 2012-07-06 01:34:16

我的示例需要的jQuery：

if (window.location.pathname == '/') { 
    var url_class = 'index'; 
} else { 
    // Very first part of the path, so /path/to/url returns 'path' 
    var url_class = window.location.pathname.split('/'); 
    url_class = url_class[1]; 
} 

$('a.' + url_class).addClass('active');

什麼這個基本不，是獲取URL的路徑組件（域後，查詢字符串之前，see here），然後檢查，看它是否是「 /'，又名索引，並手動將URL類設置爲'index'。

否則，它得到的URL的第一分量，所以/ask返回ask，/questions/bar返回questions，/users/edit/5返回users，/tagged/layouts返回tagged等

然後jQuery的添加類active到任何元件與所述給定類。

來源

2012-07-06 01:08:40

您不能在Javascript中使用「class」作爲變量的名稱，它會在大多數瀏覽器中引發錯誤 – 2012-07-06 01:11:41

@IvanCastellanos是的，在您評論之前修復它:) – 2012-07-06 01:12:12

您忘記了最後一個 – 2012-07-06 01:12:44

Javascript獲取當前頁面並根據URL添加類到一個元素

回答

相關問題