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 swiping to a new page. So far I could only have several different pages with the same navbar linking to each other but that's not what I want.

This code can be made to be more modular by using relative selectors rather than absolute ones (like $('.content_div'), as this will select all matching elements in the DOM rather than just ones relative to the button clicked).

//same selector here
$(document).delegate('.ui-navbar ul li > a', 'click', function () {
//un-highlight and highlight only the buttons in the same navbar widget
$(this).closest('.ui-navbar').find('a').removeClass('ui-navbar-btn-active');
//this bit is the same, you could chain it off of the last call by using two `.end()`s
$(this).addClass('ui-navbar-btn-active');
//this starts the same but then only selects the sibling `.content_div` elements to hide rather than all in the DOM
$('#' + $(this).attr('data-href')).show().siblings('.content_div').hide();
});​

This allows you to nest tabs and/or have multiple sets of tabs on a pages or pseudo-pages.

Thanks for this - had exactly the same problem earlier this afternoon and was trying to work it out when I stumbled across this post which no doubt has saved me hours - +1 from me
–
Jon ClementsJul 13 '12 at 22:59

@Jasper, any chance you'd give a hand for nested tabs? I managed to get the main tabs showing their content just fine with .ui-navbar ul li > a on the firsts two line but once i click a nested tab it "shuts all down" due to the $('.content_div').hide();. Thanks.
–
kevinOct 18 '12 at 17:13

@kevin If you setup a JSFiddle of your current code I'll take a look.
–
JasperOct 18 '12 at 17:39

@kevin You can make the event handler code relative to the element clicked by using relative selectors like .closest() and .siblings(). See what I came up with here: jsfiddle.net/Cfbjv/25
–
JasperOct 19 '12 at 2:01

What if you wanted to display a particular tab's page based on what day it is? Also, this example loses the 'active' tab after a few tab clicks and when using the back button. Also, when first loaded in Firefox it shows the navbar in the middle of the page for a second when you click a tab, but only for a second. And after a couple of clicks it doesn't do that anymore
–
Justin WhiteMar 7 '12 at 2:41

The following code will change to page 2. As for the navbar issue, have you tried JQM 1.1 RC1? $.mobile.changePage("#page-2", { transition: "none", changeHash: false });
–
Ryan HaneyMar 7 '12 at 7:23

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.