NavBar Sample

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css">
<div data-role="page">
    <div data-role="header">
        <h1>Page One</h1>
    </div>
    <div data-role="content">
        <ul data-role="listview">
            <li><a href="#page2">Page 2</a></li>
        </ul>
    </div>
</div>
<div id="page2" data-role="page">
    <div data-role="header">
        <a href="#" data-rel="back">Back</a>
        <h1>Page Two</h1>
        <div data-role="navbar">
            <ul>
                <li><a href="#">One</a></li>
                <li><a href="#">XXX</a></li>
            </ul>
        </div><!-- /navbar -->  
    </div>
    <div data-role="content">
        <div id='aDiv'>hi subpage2</div>
   
    </div>
    
         <div data-role="content">
        <div id='aaDiv'>hi subpage23333</div>
   
    </div>
</div>

CSS

#aDiv {
    height: 2em;
    line-height: 2em;
    text-align: center;
    width: 200px;
    border: solid;
    margin-right:auto;
    margin-left:auto;
    margin-top: 2em;
}

JavaScript

$(function(){
    var toggleDiv = function(e) {
        console.log('toggle');
        $('#aDiv').toggle();
        
        e.preventDefault();
    };
    
    $(document).delegate('[data-role="navbar"] a', 'click', toggleDiv);
});