Add and remove class from NavBar items

[Hawk]

I have the following html:

code
<div data-role="navbar">
<ul>
<li><a href="#" id="cb" class="UnPressedButton" name="a" onclick="clickme()">Categories</a>
<li><a href="#" id="ah" class="PressedButton">All Hacks</a></li>
<li><a href="#" id="mh" class="UnPressedButton">My Hacks</a></li>
</ul>
<>
<!-- /navbar -->
/code

CSS:
pre

&#46;PressedButton{
height:25px;
font-size: 1em !important;

font-family: Helvetica, Arial, sans-serif !important/{global-font-family}/;
background: #eeeeee !important;
border-bottom-color: green !important;
color: #c32c2c !important;
text-shadow: 0
0px
0
#000000
!important;
box-shadow: 0px -6px 0px 0px green inset !important;
}

&#46;UnPressedButton {
height:25px;
font-size: 1em !important;
font-family: Helvetica, Arial, sans-serif !important/{global-font-family}/;
background: #eeeeee !important;
color: #c32c2c !important;
text-shadow: 0
0px
0
#000000
!important;
}
/pre

When I click "bc" button, it runs the following:

pre
function clickme() {
$("#cb")&#46;addClass('PressedButton');
$("#ah")&#46;addClass('UnPressedButton');
Apperyio( "panel_72" )&#46;panel( "open" );
}
/pre

So I expect to change the appearance of the button "bc" to be same like "ah" button, and "ah" to be like "bc" before click. However, when I click, nothing happens. After I click somewhere else, 'PressedButton' applies to "bc", but 'UnPressedButton' does not apply to "ah". Why is that?

Thanks,

[M&M]

Couple of things here - First is that you will need to add the class only if it has not been added earlier. And 2nd thing is that you may need to do a refresh. Changes to certain properties need the refresh method to be called before it can be seen.

And also the addClass method is often used with .removeClass() to switch elements classes from one to another:

$( "myelement" ).removeClass( "myClass noClass" ).addClass( "yourClass" );

I have noticed that if you repeatedly call some methods without knowing its current state or properties, it can 'sometimes' result in weird behavior. I generally maintain flags and read that before I manipulate the settings. And I do that in situations where I cannot easily read a property or so. Maintaining a flag is much more easier

[Hawk]

Thanks M&M. I have tried code$( "#cb" )&#46;removeClass( "UnPressedButton" )&#46;addClass( "PressedButton" ); /code . the new class did not apply until I click elsewhere!
Btw, how can I refresh the NavBar?
I'm not sure what could be the problem.

[M&M]

If you can do a single page to reproduce the problem it will be easier to debug, figure out what is wrong. It will also prevent any accidental changes from being made to the code.

And have you tried referring to the element in different ways - say using dsid and Apperyio('elementname')?