Skip to content

Instantly share code, notes, and snippets.

@kwbock
Created January 9, 2013 17:55
Show Gist options
  • Save kwbock/4495249 to your computer and use it in GitHub Desktop.
Save kwbock/4495249 to your computer and use it in GitHub Desktop.
<!-- 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.navtab styles */
.tab-content {
display:none;
}
.tab-content:first-child {
display:block;
}
// 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;
});
@phacoledezma
Copy link

Muchas gracias, fue muy útil para mi. Saludos.

@jnoliver2
Copy link

Nice one. How do i link from the previous page direct to tab 2?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment