使用與當前頁面相同的屬性值更改'li'的顏色

Question

我目前正在爲一家建築公司設計網站。這是我目前所指的頁面：http://www.hla.co.za/projects/Hyundai_Training_Centre/。每個項目都有每個項目頁面上的類別（住宅，商業，教育），我有以下的，告訴什麼樣的項目該頁面爲：

<div id="projects" data-cat="commercial"> 

使用Javascript/jQuery的我得到attr屬性值：

var cat = $("#projects").attr('data-cat'); 

我知道這工作正常，因爲當我alert(cat)它正常工作。
在導航菜單中，有與相應的項目類型值鏈接：

<ul id="sub"> 
    <li data-highlight="commercial"> 
     <a href="http://www.hla.co.za/projects/#commercial">Commercial</a> 
    </li> 
    <li data-highlight="residential"> 
     <a href="http://www.hla.co.za/projects/#residential">Residential</a> 
    </li> 
    <li data-highlight="education"> 
     <a href="http://www.hla.co.za/projects/#education">Education</a> 
    </li> 
</ul> 

我想改變當前項目類型的字體顏色（在data-highlight），所以我這樣做：

$("li[data-highlight='"+cat+"']").css("color", "red"); 

但由於某些原因，它不會改變顏色。但是，當我嘗試做別的事情，如：

$("li[data-highlight='"+cat+"']").remove(); 

它正常工作，我不明白爲什麼這種情況正在發生和將不勝感激你的幫助。

Answer 1

要設置爲li顏色，但內a覆蓋它。

只需使用$("li[data-highlight='"+cat+"'] a").css("color", "red");，你會被罰款。

Answer 2

我看了一下你鏈接的頁面。問題出在你的style.css文件中。我包含以下內容：

.nav a { text-decoration: none; color: white; } 顏色應用於元素具有較高覆蓋應用於li元素的顏色。所以對li顏色的更改將被忽略。因此，您必須刪除應用於a的樣式，或將顏色更改應用於元素。