JQM: Click navbar in footer to switch content only,

JQM: Click navbar in footer to switch content only,
In JQM, you want to fix the Header and Footer. Of course, Footer has a NavBar navigation menu,
<Div data-role = "page">
<Div data-role = "header"> header </div>
<Div data-role = "content"> content </div>
<Div data-role = "footer"> footer </div>
</Div>

The format is as above. When you click the corresponding structure menu, you want to replace it with only
<Div data-role = "content"> ...... </div>
But it replaces the entire "Page" in the form of a Page ".

There is actually no good solution to this problem. I guess this is a common problem in html.

I googled (do not use baidu, and baidu cannot find similar problems). In fact, the solution for foreigners is the same as what I did before. It is to repeat a navbar in every page, for details, see the following html:

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

He just removed the page Jump effect (the default is slide), which makes it hard to see that the page was not switched, but only changed the content in the middle.

The specific JS is as follows:




$("a[data-role=tab]").each(function () {      var anchor = $(this);      anchor.bind("click", function () {          $.mobile.changePage(anchor.attr("href"), {              transition: "none",              changeHash: false          });          return false;      });  });    $("div[data-role=page]").bind("pagebeforeshow", function (e, data) {      $.mobile.silentScroll(0);      $.mobile.changePage.defaults.transition = 'slide';  });  

This is the best and most understandable solution at present. I have seen another solution, but it is hard to understand and not to use JavaScript.