Changing on selection CSS element

[jonnystudent]

I know there is a simple way to do this but I can't seem to find it.  I have a drop down box, which has a list.  One you hover your mouse over any one of the items on the list, it's encircled by a border.  This is great.

 

What I want is for when a user selects an item from this list.  It will automatically change the background colour to #ddd.

 

If the user selects another item from the list, it will change that items background and the other item will have reverted back to it's white background.

 

So, I have a class called 'hi'.

 

My CSS is like so:

 

                    #changer a{
                        padding:3px;
                        border: solid 1px #fff;    
                    }
                    #changer a.hi{
                        background:#ddd;
                    }
                    #changer a:hover{
                        border: solid 1px #ddd;
                        text-decoration:none;
                    }

 

How would I change the element on selection using javascript or jquery.

 

Any help would be mostly appreciated.

 

Cheers,

 

Jonny

[Adam]

The jQuery toggle event makes it really simple:

 

$('li').toggle(function() {
    $(this).addClass('selected');
}, function() {
    $(this).removeClass('selected');
});

 

You'll want to change the selector ('li') to match your specific element though.