I want to use nested page in my application, so I create a page container as my home page, the container has a fixed header and fixed footer, and the footer has a navigation bar.The html is like below.

<div data-role="page" id="container">--home page

      <div data-role="header" />

      <div data-role="content" id="contentcontainer">--content page container

            <div data-role="page" id="contentpage1" />

            <div data-role="page" id="contentpage2" />

      </div>

      <div data-role="footer">

            <div data-role="navbar">--navigation bar

                  <ul>

                        <li>nav1/li>

                        <li>nav2<li>

                  </ul>

            </div>

      <div/>

</div>

What i want is when i click the navigation bar ,the content page changed accordingly, and the header ,footer doesn't change,like when i clicke nav2,the content changs from contentpage1 to contentpage2,and the page transition only apply to the content page.But with that code ,it doesn't work like that,so if anyone else does achieve this,please help me, any reply would be appreciated ,thanks!