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

UPDATE: Check out my jsfiddle at http://jsfiddle.net/ryanhaney/eLENj/

I just spent some time figuring this out, so I thought I would answer this. Note I am using multi-page single file, YMMV.

    

        

            
Page 1
            
Page 2
            
Page 3
        
    


$("div[data-role=page]").bind("pagebeforeshow", function () {
    // prevents a jumping "fixed" navbar
    $.mobile.silentScroll(0);
});

$("a[data-role=tab]").each(function () {
        // bind to click of each anchor
        var anchor = $(this);
        anchor.bind("click", function () {
            // change the page, optionally with transitions
            // but DON'T navigate...
            $.mobile.changePage(anchor.attr("href"), {
                transition: "none",
                changeHash: false
        });

        // cancel the click event
        return false;
    });
});