Active state of navbar click persistent after removal JQuery Mobile

Question

I update a single html page with new data when clicking previous or next I am using a navbar for the two buttons. However the active, colored state of the navbar click persists even when I remove the class on click with this:

$(".nav").removeClass(".ui-btn-active");

I have also tried putting this in an .Click function. It will work the first time, but on the second click the light blue color of the active state persists. Any recommendations?

Here is the navbar HTML:

 <div data-role="navbar" class="nav" >
<ul>
    <!--<li><a href="#" class="ui-btn" onClick="Calendar_Add()" data-icon="calendar"></a></li>
    <li><a href="#" data-icon="mail"></a></li>-->
    <li><a href="#" data-role="button" onClick="previous_event()" data-icon="arrow-l"></a></li>
    <li><a href="#" data-role="button" onClick="next_event()" data-icon="arrow-r"></a></li>
</ul>

Answer 1

Initially remove ui-btn-active class from all tabs

After that on each click remove class ui-btn-active add customize css class you want display.

jQuery:

$(".nextLink").click( function() {

 $(".nav").removeClass(".ui-btn-active");

 $(this).addClass("selectedTab");

})

CSS:

.selectedTab {
background-color: #E4002B !important;

color: #FFFFFF;

font-family: sans-serif;

font-size: 18pt !important;

font-weight: normal;

}

EDIT: According to your HTML add and remove Class onClick of previous_event() & next_event()