Question

I have a little project I am working on and I am using jQuery. I tried using a little jQuery to change the class to change some css styles when clicked but it does not seem to work.

heres the important html:

<ul id="UInavList">
        <li class="selectedNav"><a href="javascript:;">My Activity</a></li>
        <li ><a href="javascript:;">My Tests</a></li>
        <li ><a href="javascript:;">Messaging</a></li>
        <li ><a href="javascript:;">Search</a></li>
    </ul>

and heres the javascript:

$('#UInavList li').click( function() {
    $('#UInavList li').removeClass('selectedNav');
    $(this).addClass('selectedNav');
})

If you want to see all the code go here: http://jsfiddle.net/chromedude/XXXwL/

Answer 1

Your code already works in jsfiddle, you just hadn’t set the framework to include jQuery on the right hand side – also with no class set to see the changes, it was hard to tell if it worked.

Look at this demo, it is identical to yours except it has a CSS entry to show up the change and I set the jQuery option on the side.

http://jsfiddle.net/XXXwL/8/

I would however target the anchor rather than the li itself and use $(this).closest('li').addClass('selectedNav'); as the second line for preference, remembering to return false if you target an anchor with click() so that the href is not followed.