CODEWITHSUNDEEP
javascriptjqueryhtmlcss
YSK .CO
YSK .CO

Reputation: 164

Change colour of 'li' with the same attribute value as current page

I am currently designing the website for an architecture firm. Here is the page I am currently referring to: http://www.hla.co.za/projects/Hyundai_Training_Centre/. Each project has a category (residential, commercial, education) on each project page I have the following to tell what kind of project that page is:

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

With Javascript / Jquery I get that attr value: 

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

I know this works correctly because when I alert(cat) It works correctly.
On the navigation menu, there are links with corresponding project type values: (in the data-highlight)

<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 want to change the font color of the current project type, so I do this:

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

However for some reason it does not change colour. But when I try do something else such as:

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

It works correctly, I do not understand why this is happening and would greatly appreciate your help.

Upvotes: 0

Views: 81

Answers (2)

rulio
rulio

Reputation: 324

I've taken a look at the page you linked. The problem is in your style.css file. I contains the following:

.nav a { text-decoration: none; color: white; } The color is applied on the element has higher overrides the color applied to the li element. So changes to the li's color are ignored. Therefore you must either remove the styling applied to a, or apply the color change to the element.

Upvotes: 0

Beto Frega
Beto Frega

Reputation: 976

You are setting the color for the li, but the inner a overwrites it.

Just use $("li[data-highlight='"+cat+"'] a").css( "color", "red" ); and you will be fine.

Upvotes: 3

Related Questions