Question

I have CSS for list tags that emulate buttons, as follows:

Before addClass is called (and ideally, what removeClass should return to)

#content_navigation li {
background-color:#C7C7C7;
border:2px outset black;
text-align:center;
font-weight:400;
}

After addClass(‘clicked’); is called

#content_navigation li.clicked {
background-color:#EFEFEF;
border:1px inset black;
font-weight:700;
}

My JQuery code (for one button):

$('#pass_settings_btn').click(function() {
$('#pass_settings_btn').addClass('clicked');
$('li:not(#pass_settings_btn').removeClass('clicked');

In Firefox, this works perfectly. but in Opera/IE7 (the only ones I have to test on, apart from Firefox 5), but buttons don’t go back to their original states. The original CSS isn’t “coming through” after removeClass is called. How can I fix this (hopefully without a browser specific hack?)

Answer 1

Try changing

$('li:not(#pass_settings_btn').removeClass('clicked');

to

$('li:not(#pass_settings_btn)').removeClass('clicked');