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

I liked @Ryan-Haney's answer, but thought I'd add my own rough draft in, if anyone can find a more efficient way of doing this, then please add a comment.. thanks

I did it this way because I have a bunch of "include" files that get loaded into the DOM at runtime, so I couldn't hard-code that the n-th tab is highlighted/active for each page like Ryan could. I also do have the luxury of having only a single tabbar in my app.

$(document).delegate('.ui-navbar a', 'tap', function ()
{
  $('.ui-navbar').find('li').find('a').removeClass('ui-btn-active');
  $('.ui-navbar').find('li:nth-child(' + ($(this).parent().index() + 1) + ')').find('a').addClass('ui-btn-active');
});