Javascript 包括jquery移动多页面站点中的页眉和页脚

我正在创建一个jquery移动web应用程序，它包含3个页面，这些页面的页眉/导航没有改变，但在我看到的所有示例中，页眉和页脚都添加到了每个页面中。是否可以只添加1个导航和1个页脚，然后按如下结构切换页面的主要内容：

<div id="header" data-role="header"></div>
<div id="page1" data-role="page">content</div>
<div id="page2" data-role="page">content</div>
<div id="page3" data-role="page">content</div>
<div id="footer" data-role="footer"></div>

内容
内容
内容

基本上，有没有一种方法只显示/隐藏主要内容，而不使用页眉和页脚

任何关于这方面的建议都会很好

---

Kyle

看看jQuery中的

load（）

方法->

这是一个exmaple：

$('#navigation').click(function() {
   $('#page1').load('page1.html');
});

---

这意味着，当单击id为

navigation

的内容时，它将调用

load（）

函数，并将

div

替换为id为

page1

的加载文件的内容。

否，不幸的是JQM（目前）不支持此功能，您需要在每个role=页面上添加role=页眉和role=页脚（全部3个）

看

我会坚持使用$.mobile.changePage（），因为它会处理哈希和许多其他事件，而不仅仅是使用JQuery来加载（）新内容

希望这有助于您在jQuery中使用.load（）

例如，在每个页面中，您都会看到以下内容：

<div data-role="footer" class="ui-footer"></div>

现在，当您在页面之间移动时，请尝试单击（如果愿意，也可以从代码中）调用：

这样就可以了（我就是这么用的）

您也可以对标题执行相同的操作

请记住，如果每个版本的应用程序的页眉或页脚内容发生变化（如本地化），则必须先调用此函数，然后填写本地化文本或其他任何内容

我希望这对你有所帮助

function goTo(pageURL, transitionType) {
  $.mobile.changePage(pageURL, transitionType);
  $('.ui-footer').load('assets/includes/footer.html');
}

goTo('home.html','slideup');