index.html

<!-- the content markup -->
<div id="tab1" class="tab-content">
  Tab 1 Content
</div>
<div id="tab2" class="tab-content">
  Tab 2 Content
</div>
<div id="tab3" class="tab-content">
  Tab 3 Content
</div>

<!-- the navbar markup -->
<div data-role="navbar">
  <ul>
    <li><a href="#" class="ui-btn-active" data-href="tab1">Details</a></li>
    <li><a href="#" data-href="tab2">Media</a></li>
    <li><a href="#" data-href="tab3">Map</a></li>
  </ul>
</div>

jqm.navtabs.css

/* jqm.navtab styles */
.tab-content {
    display:none;
}
.tab-content:first-child {
    display:block;
}

jqm.navtabs.js

// include this file before your jquery-mobile script tag
$(document).delegate('.ui-navbar ul li > a', 'click', function() {
  //search the navbar to deactivate the active button
  $(this).closest('.ui-navbar').find('a').removeClass('ui-btn-active');

  //change the active tab
  $(this).addClass('ui-btn-active');

  //hide the siblings
  $('#' + $(this).attr('data-href')).show().siblings('.tab-content').hide();

  return false;
});