我怎樣才能讓jQuery或Javascript來改變基於當前網址的CSS？

我在我的內容的單獨文件中有一個導航區域，並且我使用php include將這兩個文件放在一起。我希望導航區域鏈接根據任何活動頁面（即當前URL）更改顏色。所以我想用jQuery或Javascript來讀取當前的URL（實際上只是文件名，比如home.html），然後根據這個來編寫CSS。我怎樣才能讓jQuery或Javascript來改變基於當前網址的CSS？

於是想，如果 URL = home.html的，變化的CSS nav.home.background->藍色

來源

2011-09-27 Jono

只是一個想法，但有一個原因，在PHP使用JavaScript來做到這一點？ PHP會提供一個瀏覽器一致的解決方案（例如，不會被關閉javscript的用戶所影響，等等） – n00dle

你能選擇一個答案嗎？ – hunter

在你的情況的東西，你可以嘗試這樣的事：

$("A").each(function() { 
    if (this.href == document.URL) { 
     $(this).addClass('active'); 
    } 
});

那檢查每個鏈接是否href屬性匹配當前文檔的URL，並且它確實將class'active'添加到CSS類的元素。

一個小問題：只有在菜單中提到的絕對URL和實際文檔中使用的絕對URL完全匹配時，纔會生效。那麼我們假設當前的網址是http://example.org/dir/，那麼<a href="index.html">將不會突出顯示，因爲它會解析爲http://example.org/dir/index.html。 <a href="/dir/">將匹配。（確保整個站點的每個頁面都使用相同的URL，無論如何都是好的做法，例如，用於搜索引擎優化和緩存代理）

所用的不同部分是：

$("A")選擇所有A元件（錨）。您可能希望通過選擇菜單中的所有A元素使其更具體一些，例如$("#menu A")。 [jQuery的]
.each(func)執行每個選擇的元件的指定功能。在該函數內，this將引用所選元素。 [jQuery的]
this.href返回absolute URI of the linked resource，並非如你所料，在HTML中指定的可能相對位置。 [標準DOM]
$(this).addClass(clzName)用於將CSS-類添加到指定的元素。 [jQuery的]

爲了確保$("A")發現的所有元素，它執行後的文檔被完全加載（在$(document).ready() jQuery的事件處理程序，或使用BODY標籤的onload屬性）。

來源

2011-09-27 17:43:54 beetstra

這是驚人的，非常優雅。儘管（http://i5.nyu.edu/~jpr226/)- $（「A」）每個都做什麼，我還是無法完成它的工作。這需要jQuery嗎？ – Jono

是的，它需要jQuery。我會更新我的答案以更多地解釋它。 – beetstra

$（this）.addClass（'active'）似乎不起作用;我想看看通過添加「警報（本）」下，該行的內容（這）包含的，我得到一個警告，說當前的URL，這使我相信，不知它是不是做選擇的一個好工作元素被分類 – Jono

像這樣的事情

var url = $(location).attr('href'); 
    //get the url 

if(url.indexOf('home.html') != -1){ 
    //indeOf returns -1 if item not found in string 
    //so if it is not -1 (that is, found) 
    //then apply the styles 
    $('#nav').css('background','blue'); 
}

你可能需要一個交換機或case語句，儘管如此，處理所有的網址/部分。

喜歡的東西

var url = $(location).attr('href'); 
var fileName = url.slice(url.lastIndexOf('/') + 1); 

switch (fileName){ 
    case 'home.html': 
     $('#nav').css('background','blue'); 
     break; 
    case 'about.html': 
     $('#nav').css('background','red'); 
     break; 
}

來源

2011-09-27 16:53:02

要閱讀的JavaScript當前網址：

var url = window.location.href;

要改變一個給定的元素上css屬性：

$('some_selector').css({ backgroundColor, 'blue' });

來源

2011-09-27 16:53:28

var url_arr = document.URL.split('/'), 
    page = url_arr[url_arr.length - 1]; 

switch (page) { 
    case 'home.html': 
     $('your-element').addClass('your-class'); 
     break; 

    /* other cases here */ 

}

應做tric ķ。

來源

2011-09-27 17:01:16

+1職員:) –

我認爲一個更好的解決方案是在html標籤上設置一個類，而不是每頁換出一個css文件。

$("html").addClass(window.location.path.split(".")[0]);

，然後有基於關閉這個類的任何自定義的CSS樣式：

html.home > .nav { background-color: blue; } 
html.about > .nav { background-color: green; } 
html.contact > .nav { background-color: red; }

如果每個頁面有一個擴展來分割這隻會工作，那就是

由於你使用PHP，你可以做到這一點，沒有jQuery：

<html class="<?php $_SERVER['PHP_SELF'] ?>">

或類似的東西，我不太瞭解PHP，但我敢肯定，這將是類似或建過這個

來源

2011-09-27 17:04:51 hunter

我怎樣才能讓jQuery或Javascript來改變基於當前網址的CSS？

回答

相關問題