CODEWITHSUNDEEP
jqueryhtmlcss
chap
chap

Reputation: 1869

Why can't I change background of active navigation element?

I'm trying to make my active navigation tab's background color turn to white, while the active hyperlink text should simultaneously change to black. 'Active' in this case means the current page the user is on.

To do this I'm using jquery to add a class of .selected

$(document).ready(function () {
    $('.navbar a').each(function (index) {
        if (this.href.trim() == window.location) $(this).addClass("selected");
    });
});

currently the css for each navigation element without the .selected class is: 

.navbar a {
    color:#FFFFFF;
    padding:10px 10px 0 10px;
    margin-left:5px;
    margin-right:5px;
    background-color:#404040;
    border-radius: 10px 10px 0 0;
}

and the css for the .selected class is: 

.selected {
    background-color: #FFFFFF;
    color:#404040;
}

However, it is not working.

Here is my jsfiddle.

http://jsfiddle.net/m9YfG/1/

Upvotes: 0

Views: 82

Answers (1)

Alex
Alex

Reputation: 35399

Add more weight/specificity to the selector:

.navbar a.selected { background-color: #FFFFFF; }

Or alternatively, add the !important directive:

.selected { background-color: #FFFFFF!important; }

Upvotes: 3

Related Questions