Question

I have a navigation bar:

<div id="the navigation">
<ul>
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a></li>
</ul>
</div>

I want it so that when the user clicks on any of the items, it becomes highlighted (for example, it should get a red background). If a different item is clicked, then the currently highlighted one should no longer be highlighted and the one that was just clicked should be. There should only be one lit at any given time.

How do I do this with jQuery?

Answer 1

Edit: Updated to use the actual HTML you have now posted. First, I had to remove the space your your id value as a space makes it difficult or impossible to use it in many selectors.

<div id="thenavigation">
    <ul>
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 2</a></li>
        <li><a href="#">Item 3</a></li>
    </ul>
</div>

I’d suggest this CSS:

.highlight {background-color: red;}

to go with this jQuery:

$('#thenavigation li a').click(function() {
    $(this).closest("li").addClass('highlight').siblings().removeClass('highlight');
    return(false);   // no default behavior from clicking on the link
});

You can see it work here with your HTML: http://jsfiddle.net/jfriend00/r9s7w/.

Or working here without the <a> tags: http://jsfiddle.net/jfriend00/TreKN/.