在該頁面上更改一個鏈接的CSS背景色

嘿，我只是試圖只改變我的導航中的鏈接的背景顏色，而不是所有導航鏈接的其餘部分，只有當用戶在該鏈接適用的詳細頁面。在該頁面上更改一個鏈接的CSS背景色

的代碼是：

$("#nav li ul li a #changeBG1").css("background-color","red");

而且導航HTML看起來有點像這樣：

<ul id="nav"> 
    <li><a href="index.php">home</a></li> 
    <li><a href="custHelp.php">who we are</a> 
    <ul> 
     <li id="changeBG1"><a href="about.php">about</a></li> 
     <li id="changeBG2"><a href="help.php">team</a></li> 
    </ul> 
</li>

然而，它似乎並沒有改變只是一個，它改變了他們所有人。我似乎無法找到如何調用NAV的ID，然後ID ID所以只有這一個會改變。

jQuery代碼是：

var url = window.location.href; 

url = url.substr(url.lastIndexOf("/") + 1); 
$("#theNav").find("a[href='" + url + "']").addClass("theNavsBG"); 

if (url == 'about.php'){ 
    $("#nav li ul li a #changeBG1").css("background-color","red"); 
}

任何幫助將是巨大的！謝謝！

來源

2012-06-04 StealthRT

'$（'＃changeBG1'）..' 應該就夠了。 – gdoron

只有當你感興趣的時候，你纔可以用標記和CSS來做到這一點（並且可以在每個頁面的body標籤中添加一個類或id。） – kinakuta

@kinakuta：那就行了。我喜歡通過jQuery做更多：o） – StealthRT

試試這個：

$("#changeBG1").css("background-color","red");

id是最好的選擇，你並不需要添加它的「東西」。

您還可以添加一個類到li：

$("#changeBG1").addClass('foo');

不管怎麼說，它看起來likt你的選擇應該是：

$("#nav li ul li#changeBG1").css("background-color","red");

來源

2012-06-04 21:40:38 gdoron

我必須添加** **而不是** $（「＃nav li ul li a＃changeBG1 「）。css（「background-color」，「red」）; **爲了使其工作：o） – StealthRT

@StealthRT。請僅使用'id' ... – gdoron

當我嘗試** **（「＃changeBG1」）.css（「background-color」，「red」）; **時，我的意思是不起作用。它只有當我從** li **中取出id並將ID添加到實際的超鏈接時才起作用。 – StealthRT

我會做一個CSS類，然後只需添加類到使用jQuery的特定鏈接來顯示它是當前頁面。

CSS

.active { 
    background-color: red; 
}

jQuery的

var url = window.location.href; 
url = url.substr(url.lastIndexOf("/") + 1); 

$("#nav li ul li a").removeClass('active'); 
$("a[href='" + url + "']").addClass('active');

來源

2012-06-04 21:51:17

感謝代碼，joshmfrankel。就像saluce一樣。 – StealthRT

http://jsfiddle.net/saluce/LhbKv/1/

讓生活在自己簡單...

.active{ 
    background-color: red; 
}

...

$("#nav a[href$='" + url + "']").addClass("active");

該代碼會發現，在URL中的字符串（在選擇的$提供）結尾的鏈接，並添加一個類到a標籤。如果您想爲li着色，請使用.parent()。

$("#nav a[href$='" + url + "']").parent().addClass("active");

來源

2012-06-04 22:04:24 saluce

感謝您發佈該代碼。我的確有點類似於你在那裏做的。 – StealthRT

在該頁面上更改一個鏈接的CSS背景色

回答

相關問題