I've been working on an iOS app with HTML5 shelled via Cordova/Phonegap.

My app has different HTML files and most of them are listviews with serverside data. Here's the footer I have in all the HTMLs

1. <footer data-tap-toggle="false" data-id="glob_foot" data-role="footer" data-position="fixed" class="x_nav_bar">
   <nav data-role="navbar"> 

   <ul>

   <li><a data-icon="grid" class="ui-btn-active ui-state-persist" data-iconpos="top" href="3.html">Brands</a></li>

   <li><a data-icon="grid"  data-iconpos="top"  href="4.html">Stores</a></li>

   </ul>

   </nav>

   </footer>

The above is footer in 3.html and in 4.html i have the same with the  class="ui-btn-active ui-state-persist"on the second LI.

I also have turned on data-dom-cache="true" on both the pages. When I go between both the pages now,  inthe footer both the items gets the active state.... 

I know the problem is because the active state is also cached with DOM for each page. How can this be resolved so that when I'm in each page, the respective active state only lights up?

Thanks for any help in advance.