<!-- This file is item.html -->
<div data-role="page" id="item1" data-add-back-btn="true">

  <div data-role="header" data-backbtn="true">
    <h1>Item1</h1>
  </div>

  <div data-role="content">
    now use the back link or the back button... the url changes to #tab2 but you stay on this here page.
 Click again and you're on tab1. But we never again saw tab2!
  </div>

  <div data-role="footer" data-id="foo1" data-position="fixed">
    <div data-role="navbar">
      <ul>
        <li><a id="tab1" href="#tab1">Tab1</a></li>
        <li><a id="tab2" class="ui-btn-active ui-state-persist" href="#tab2">Tab2</a></li>
      </ul>
    </div><!-- /navbar -->
  </div><!-- /footer -->
</div>