如何在更改html页面时维护公共元素

时间:2013-11-19 14:05:44

标签: jquery html5 jquery-mobile webpage

我正在为移动设备开发一个网站。该网站有不同的页面。像页眉这样的一些元素在每个页面中都很常见。我不想复制代码。有没有办法只改变网页的一部分而不是整体。当从一个页面转换到另一个页面时,标题中的元素不应该改变。

我将不胜感激。

此致

1 个答案:

答案 0 :(得分:1)

您有几个选择:

  • 使用iframe
  • 使用Ajax
  • 使用模板系统

使用Javascript / jQuery可以相对轻松地完成前2个。

当您点击链接时,您需要更改iframe的来源,或者,您可以通过ajax请求新内容并将当前内容替换为新内容。

您可以使用iframe在jQuery中尝试这些方法:

$("a").click(function(e){ 
  //In order to stop following the link, but call our own function
  e.preventDefault();

  //Get the URL of the link we clicked
  var new_content_link = $(this).attr("href"); 

  //Now set the new source of the iframe so the content reloads
  $("iframe").attr("src", new_content_link);
});

你需要一些HTML:

<a href="/some_other_page.html">Some other page</a>
<iframe src="/current_page.html"></iframe>

点击该链接会导致iframe的来源被替换为“/some_other_page.html”,该HTML文件的内容将被加载到您的iframe中。

现在尝试使用Ajax,你需要这些内容:

$("a").click(function(e){ 
  //In order to stop following the link, but call our own function
  e.preventDefault();

  //Get the URL of the link we clicked
  var new_content_link = $(this).attr("href"); 

  //Request the content of the other page into our #content div:
  $("#content").load(new_content_link);
});

可以使用的HTML:

<a href="/some_other_page.html">Some other page</a>
<div id="content">Old content</div>

现在点击链接,将调用jQuery的load()函数,该函数将“/some_other_page.html”的内容加载到div#content中。

如果你需要一些关于模板系统的信息,我建议你去找一个CMS,比如Wordpress,或者找个自己的框架,比如Laravel(PHP),CodeIgniter(PHP)或Express(node.js) )。

古德勒克!