title: jquery mobile force ui-btn-active on navbar button
body: <p>I am having a problem with jQuery mobile navigation (navbar).</p>
  
  <p>I have 4 pages and I've set the class="ui-btn-active" to a different one on each page..</p>
  
  <p>For example:</p>
  
  <p>Page 1:</p>
  
  <pre><code>&lt;div data-role="footer"&gt;
  &lt;div data-role="navbar"&gt;
  &lt;ul&gt;
  &lt;li&gt;&lt;a href="index.html" data-icon="home" data-iconpos="top" class="ui-btn-active"&gt;Page 1&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="index2.html" data-icon="plus" data-iconpos="top"&gt;Page 2&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="index3.html" data-icon="grid"&gt;Page 3&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="index4.html" data-icon="star" data-iconpos="top"&gt;Page 4&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;&lt;!-- /navbar --&gt;
  </code></pre>
  
  <p>then if you go to page 2:</p>
  
  <p>Page 1:</p>
  
  <pre><code>&lt;div data-role="footer"&gt;
  &lt;div data-role="navbar"&gt;
  &lt;ul&gt;
  &lt;li&gt;&lt;a href="index.html" data-icon="home" data-iconpos="top"&gt;Page 1&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="index2.html" data-icon="plus" data-iconpos="top" class="ui-btn-active"&gt;Page 2&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="index3.html" data-icon="grid"&gt;Page 3&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="index4.html" data-icon="star" data-iconpos="top"&gt;Page 4&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;&lt;!-- /navbar --&gt;
  &lt;/div&gt;&lt;!-- /footer --&gt;
  </code></pre>
  
  <p>etc...</p>
  
  <p>My problem is that it's not always highlighting and sometimes I have to press the button 2 times for it to hightlight.</p>
  
  <p>Does anyone have a clue on how to force this to work?</p>