I am in the process of creating a website for an architecture company. Currently, I am working on a specific page which you can find here: . Each project falls into a category such as residential, commercial, or education. On each project page, I include the following code to indicate what type of project it is:
<div id="projects" data-cat="commercial">
Using Javascript / jQuery, I extract this attribute value like so:
var cat = $("#projects").attr('data-cat');
When I use alert(cat), it displays the correct project type.
I have navigation menu links that correspond to each project type using the data-highlight attribute:
<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>
I am trying to change the font color of the current project type by running the following script:
$("li[data-highlight='"+cat+"']").css( "color", "red" );
Unfortunately, the color does not change as expected. Strangely, when I attempt something else like removing the element:
$("li[data-highlight='"+cat+"']").remove();
It works perfectly fine. I'm puzzled by this behavior and would appreciate any assistance you can provide.