Question

我有一个网站，我想把它的一部分静态化。会发生的是页眉，菜单栏和页脚在每个页面中都是一致的。我希望它们总是被加载，当我点击菜单按钮时，它只会重新加载网站的主体。

是否有一个简单的代码可以尽早实现这一目标？ js或ajax中的东西？对不起，但是我没有足够的经验来掌握这些语言来自己完成一些事情。我已经尝试检查jQuery库，但它仍然让我很困惑。

谢谢。

Answer 1

只需在每个页面添加一个带有标题，菜单栏和页脚ID的div容器，然后加载它：

$(document).ready(function(){ 
    $('#header').load('header.html');
    $('#menubar').load('menubar.html');
    $('#footer').load('footer.html');
});

只需确保html文件中没有html，head或body标签，只需要在div中编写的HTML代码。它就像PHP中的include函数一样。

修改

为了简单而简单的实现，将上面的代码存储在.js文件（例如include.js）中，并在html文件的所有其他脚本的包含下方的每个头中添加它：

<script type="text/javascript" src="include.js"></script>

<强> EDIT2：

另一种解决方案是加载页面内容而不是标题，菜单栏，页脚。在这里你采用相同的规范（内容html文件中没有html，body等标签）

为您的内容div命名，例如<div id="content"></div>

您的导航栏例如：

<div id="navbar"> <a href="content1.html">Content1</a> <a href="content2.html">Content2</a> </div>

JavaScript代码：

$(document).ready(function() { //Click on a link that's child of the navbar $('#navbar > a').click(function() { //Get the html file (e.g. content1.html) var file = $(this).attr('href'); //Load this file into the #content $('#content').load(file); return false; }); });

Answer 2

我认为你甚至不需要Ajax或CSS！只需使用iFrames !!它们非常棒，所发生的是你只设计一个页面作为静态内容的持有者（Header-Menu ...）并将一个iFrame放在那里作为你要加载的任何页面的占位符，你应该使用正确的css代码将iFrame放置在您想要的位置，现在，对于菜单中的每个链接，只需设置＆＃34; target＆＃34;属性等于您的iFrame的名称，所有链接都将加载到该iFrame中，并且您的页面不会在每次链接点击时重新加载...我将返回一些代码...

Answer 3

您应该考虑使用包含服务器端：http://httpd.apache.org/docs/current/howto/ssi.html

它不是很容易理解（因为它指的是apache配置），但这是一个非常好的解决方案。

简而言之，您在主页中包含了部分html代码：

 <!--#include virtual="/footer.html" -->

您不必使用或理解所有JQuery Framewol，用户代理也不必解析（如果他们能够！）Javascript。

出于这种目的，这是PHP / ASP / Java的非常好的替代品。

Answer 4

您可以使用ajax来请求每个页面的正文。但这只是一种可能性 - 有很多。另一种方法可能是使用脚本语言（php，perl）serverside创建页面内容，并使用一个函数，在每个页面中添加页脚，页眉和其他任何内容。

Answer 5

如果您对Jquery有所了解，那么可以在菜单链接上使用click事件来加载div中的页面，如下面的语法可能对您有帮助。

$(document).ready(function(){
   $("a.menu").click(function(){
      $("#bodyContent").load("http://abc.com/your-linked-page.html");
   });
});

要动态加载网址，请使用以下代码：在菜单栏中，链接如下所示：

<a href="javascript:void(0);" title="Specify-Complete-URL">Home</a>

在你的Jquery代码中：

$(document).ready(function(){
   $("a.menu").click(function(){
      url = $(this).attr("title"); // here url is just a variable
      $("#bodyContent").load(url);
   });
});

步骤1：将Jquery文件添加到您的html页面。

第2步：使用上面的jquery代码并将菜单链接更改为我在此处所说的新内容。

第3步：如果你做得对，它会对你有用。

Answer 6

传统的iframe怎么样？

在您的菜单中：

<a target="body" href="URL_to_your_Menu1_page">Menu1</a>

然后在文件中进一步说明：

<iframe name="body" src="URL_to_homepage"></iframe>

Answer 7

您可以使用框架集和框架并相应地组织您的页面。因此，包含菜单的框架始终可以显示，而在单击菜单时显示内容，可以将目标设置为您要加载内容的框架。

网站中的静态内容

7 个答案: