Question

我有一个包含标题，内容和页脚的页面。

<div data-role="page" id="home">
 <div data-role="header">
 </div>
 <div data-role="content" id="1">
 </div>
 <div data-role="footer">
 </div>
</div>

现在我想更改另一个页面中的内容部分，页眉，页脚与主页中的内容部分相同，另一个页面也是。

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

先谢谢。

更新

例如：我有一个页面，其中有多个选项，例如小提琴http://jsfiddle.net/fCcyc/1/。如果我想点击特定按钮，如果我点击Bookmark按钮，则内容将替换更改页眉和页脚是相同的。如果我点击Mapview只有内容将更改页眉和页脚是相同的，map.js文件必须加载地图。

Answer 1

$('#1').load('another_page.html #2');

Answer 2

为此，您可以不同地创建页眉和页脚文件。然后创建您的页面并在其中包含页眉和页脚。然后对于内容使用jQuery检查页面是家庭或其他页面。您可以通过以下方式检查网址：

suppose that you have a page with this address: http://sub.domain.com/page.htm. use the following in page code to achive those results:

    window.location.host : you'll get sub.domain.com:8080 or sub.domain.com:80
    window.location.hostname : you'll get sub.domain.com
    window.location.protocol : you'll get http:
    window.location.port : you'll get 8080 or 80
    window.location.origin : you'll get http://sub.domain.com

对于你的情况：

   if(window.location.hostname == "home page url") {

        <div data-role="content" id="1">
        </div>
    } else {
        <div data-role="content" id="2">
       </div>
   }

Answer 3

您可以使用AJAX加载它。如果您不想使用浏览器历史记录或深层链接，则需要进行一些编程。

更改内容：

$('#content').load('page.html');

如何使用jquery动态更改页面的特定部分？

3 个答案: