我正在为移动设备开发一个网站。该网站有不同的页面。像页眉这样的一些元素在每个页面中都很常见。我不想复制代码。有没有办法只改变网页的一部分而不是整体。当从一个页面转换到另一个页面时,标题中的元素不应该改变。
我将不胜感激。
此致
答案 0 :(得分:1)
您有几个选择:
使用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) )。
古德勒克!