jQuery Mobile Navigation Tabs

Question

I want to have a tab-navigation in my jQuery Mobile project. I know I can use the data-role \'navbar\' but I only want to change the content below that navbar without swipin

Answer 1

@Mike Bartlett

I struggled with this myself but after breaking Jasper's code down it looks like there is a slight nuance from his posted code and that on the jsfiddle page.

Where he has posted

$(document).delegate('[data-role="navbar"] a', 'click', function () {
$(this).addClass('ui-btn-active');
$('.content_div').hide();
$('#' + $(this).attr('data-href')).show(); });

I found it useful to change the last line to simply call whatever content you set the "data-href" value to be in your navbar.

$('div[data-role="navbar"] a').live('click', function () {
    $(this).addClass('ui-btn-active');
    $('div.content_div').hide();
    $($(this).attr('data-href')).show();
  });

my navbar html then reads

    
One
    
Two

Which is pretty much the same as his but for some reason I got no "error loading page" message. Hope that helps...