Question

I am trying to create a simple about page that uses JQuery click to change the text and the content of the about body (Instead of creating 3-4 independent pages). What I am trying to do with the ‘menu’ is simple but for some reason it is not working as expected.

Each menu option click will trigger a JQuery event that will change the text of the body, and change the clicked menu option’s color to blue to show that it has been selected.

Right now, the jquery I am trying to apply simply isn’t working and color isn’t toggling on click.

My JQuery

$(document).ready(function(){
    $('.about-link').click(function(){
        $(this).toggleClass('clicked');
    });
});​

jsfiddle

http://jsfiddle.net/bBDk8/6/

Answer 1

The #about-nav a css selector has more specificity than .clicked so the color is applied from that selector instead of .clicked. Raise the specificity by using #about-nav a.clicked for example.

http://jsfiddle.net/bBDk8/8/