Changing CSS element on selection

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

Goran Mottram · Accepted Answer · 2012-03-29 09:49:36Z

3

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");
});

edited Mar 29, 2012 at 9:49

answered Mar 29, 2012 at 9:41

Goran Mottram

6,30428 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Jonah Over a year ago

Perfect. Thank you. Although, I'm going to be a bit awkward here and ask if this list was split into two, and they both had the same classes. How can I differentiate the split? So if I had the option to select 5 items from the list. I could do this using the code above. But what if there were two other items on the list, which would need to be selected or deselected in their own case?I hope that makes sesne.

Goran Mottram Over a year ago

That's not too difficult. As it's out of scope of the original question I won't append the solution to the answer, but you can check one possible way to do it at this jsFiddle

Jonah Over a year ago

Hi Goran, I can see how you're doing this. But you've changed the class. If you look at this website, you'll see what I'm trying to achieve. Take a look at the currency and language changer in the top right hand corner

Goran Mottram Over a year ago

Some form of class/markup modification will be needed to get them working. Do you mean having two seperate lists of links which allow you select a single item from each?

Jonah Over a year ago

Correct yes. This would be it

|

sandeep · Accepted Answer · 2012-03-29 09:45:07Z

0

you can use :active on this write like this:

#changer a:active{
    background:#ddd;
}

answered Mar 29, 2012 at 9:45

sandeep

93.2k24 gold badges140 silver badges156 bronze badges

Collectives™ on Stack Overflow

Changing CSS element on selection

2 Answers 2

8 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related