Question

I am using two

<li><a href="#" type="button"  > text</a></li>

type buttons in the footer navbar of my application, to trigger functions in my application (not for navigation.). After each press the button stays pressed, until another button in the navbar is pressed. How can I avoid this behavior?

Answer 1

Remove manually class ui-btn-active from the last pressed button.

$('#button_id').removeClass('ui-btn-active');

EDITED

The best way is to redefine styles for class ui-btn-active, the same as for the ‘unclicked’ button. For example:

.ui-footer .ui-navbar .ui-btn-active {
    border: 1px solid       #222;
    background:             #333333;
    font-weight: bold;
    color:                     #fff;
    text-shadow: 0 -1px 1px #000;
    background-image: -webkit-gradient(linear, left top, left bottom, from( #555), to( #333));
    background-image: -webkit-linear-gradient(#555, #333);
    background-image:    -moz-linear-gradient(#555, #333);
    background-image:     -ms-linear-gradient(#555, #333);
    background-image:      -o-linear-gradient(#555, #333);
    background-image:         linear-gradient(#555, #333);
}​

Example here.