I'm currently working on a registration form that includes selecting your gender:
My goal is to have the male icon turn blue when clicked, and the female icon turn pink. The color change currently works when hovering, but not when clicked. Here is the HTML I am using:
<div id="submenugender">
<div class="submenu"><div class="sprite male" id="setmale"></div></div>
<div class="submenu"><div class="sprite female" id="setfemale"></div></div>
</div>
It may seem simple. The .sprite class sets the default height and width and loads the sprite. The male and female classes contain a background-position element:
#registercontainer .submenu .male {
background-position: -7px -462px;
}
#registercontainer .submenu .female {
background-position: -60px -462px;
}
#registercontainer .submenu .male:hover, #registercontainer .submenu .male .active {
background-position: -7px -397px;
}
#registercontainer .submenu .female:hover, #registercontainer .submenu .female .active {
background-position: -60px -397px;
}
There are some missing IDs and wrappers in the HTML for positioning purposes.
I have also created an active class in the CSS for when an icon is clicked. The position set in the active class is for the colored state.
Now, to change the color when an icon is clicked, I am using jQuery:
$("#setmale").click(function()
{
$('#registercontainer .submenu .male').addClass('active');
});
$("#setfemale").click(function()
{
$('#registercontainer .submenu .female').addClass('active');
});
However, it seems that this implementation is not working as expected. Have I made any mistakes with the selectors or anything else?
Thank you.