jquery mobile force ui-btn-active on navbar button

Question

I am having a problem with jQuery mobile navigation (navbar).

I have 4 pages and I've set the class="ui-btn-active" to a different one on each page..

For example:

Page 1:

<div data-role="footer">
<div data-role="navbar">
<ul>
<li><a href="index.html" data-icon="home" data-iconpos="top" class="ui-btn-active">Page 1</a></li>
<li><a href="index2.html" data-icon="plus" data-iconpos="top">Page 2</a></li>
<li><a href="index3.html" data-icon="grid">Page 3</a></li>
<li><a href="index4.html" data-icon="star" data-iconpos="top">Page 4</a></li>
</ul>
</div><!-- /navbar -->

then if you go to page 2:

Page 1:

<div data-role="footer">
<div data-role="navbar">
<ul>
<li><a href="index.html" data-icon="home" data-iconpos="top">Page 1</a></li>
<li><a href="index2.html" data-icon="plus" data-iconpos="top" class="ui-btn-active">Page 2</a></li>
<li><a href="index3.html" data-icon="grid">Page 3</a></li>
<li><a href="index4.html" data-icon="star" data-iconpos="top">Page 4</a></li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->

etc...

My problem is that it's not always highlighting and sometimes I have to press the button 2 times for it to hightlight.

Does anyone have a clue on how to force this to work?

Answer 1

Try adding the "ui-state-persist" class to your anchor. ex: class="ui-btn-active ui-state-persist"

Answer 2

set the link to href=# on the active button seemed to fix this for me.

The problem seemed to exist when clicking on the active link although you are already on that page, then navigating away from that page and back to it.