Question

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. Once 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 deselect the other item items 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;
}

I’ve added this script but it just selects the item from the list but it doesn’t deselect the other one. It just toggles the background colours.

<script type="text/javascript">
$(function() {
  $("a").click(function() {
    $(this).toggleClass("hi");
  });
});
</script> 

Any help would be mostly appreciated.

Cheers,

Jonny

Answer 1

Try this:

$("a").click(function() {

    // remove existing "hi"s on other links
    $("a.hi").not(this).removeClass("hi");

    // toggle "hi" on this
    $(this).toggleClass("hi");
});

If you want the links to behave like mutually-exclusive checkboxes (can only select one, but can also deselect current) then use the above code, but if you want them to behave like a set of radio buttons (can only select one, but can’t deselect current), use the following instead.

$("a").click(function() {

    // remove existing "hi"s on other links
    $("a.hi").not(this).removeClass("hi");

    // add "hi" to this
    if (!$(this).hasClass('hi'))
        $(this).addClass("hi");
});