2

我有一个网站，我想让它的一部分成为静态的。发生的情况是每个页面的页眉、菜单栏和页脚都是一致的。我想让它们总是被加载，当我点击菜单按钮时，它只会重新加载网站的主体。

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

谢谢你。

4

7 回答 7

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>

编辑2：

另一种解决方案是加载页面内容而不是页眉、菜单栏、页脚。在这里，您采用相同的规范（内容 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;
    });
});
于 2012-07-13T08:50:54.970 回答
1

我认为你甚至不需要 Ajax 或 css ！只需使用 iFrame！他们太棒了，发生的事情是你只设计一个页面作为静态内容的持有者（Header-Menu ...）并将一个 iFrame 放在那里作为你想要加载的任何页面的占位符，你应该使用适当的 css 代码将 iFrame 放置在您想要的位置，现在，对于菜单中的每个链接，只需将“target”属性设置为等于您的 iFrame 的名称，所有链接都将加载到该 iFrame 中，您的页面将不会每次点击链接都会重新加载...我会回来提供一些代码...

于 2012-07-13T09:02:36.800 回答
0

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

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

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

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

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

对于这种目的，这是 PHP / ASP / Java 的一个很好的替代品。

于 2012-07-13T17:18:45.153 回答
-1

如果您对 Jquery 有所了解，则使用菜单链接上的单击事件将页面加载到 div 中，如下语法可能对您有所帮助。

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

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

<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步：如果你做得对，它会为你工作。

于 2012-07-13T08:35:42.923 回答
-1

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

于 2012-07-13T08:31:57.767 回答
-1

传统的怎么样iframe？

在您的菜单中：

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

然后在文档中进一步：

<iframe name="body" src="URL_to_homepage"></iframe>
于 2012-07-13T08:56:24.760 回答
-2

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

于 2012-07-13T08:32:28.627 回答