Question

我正在设计一个website for a law office。每个页面都具有与此处相同的基本布局：相同的标题栏，左侧相同的菜单栏和相同的页脚。页面之间唯一会改变的是内容部分。

我的第一种方法是复制每个内容页面的这些公共元素的代码。然后，在将来，如果需要在这些条形图上进行更改（当然会发生），我将不得不进入每个子页面进行更改。

这让我的程序员不寒而栗。我不得不想象有一种方法可以做到这一点，而不使用疯狂的HTML编程套件。（我现在正在使用notepad ++代码）。有没有办法在一个地方编写菜单栏的html代码然后“源”它，就像我使用javascript和css代码一样？

我知道这样的事情可以通过框架完成，但我不想走那条路。

Answer 1

如果您可以使用某些PHP，它将使您的生活更轻松。只需查看inlude()功能，这就是您正在寻找的内容。

您将有一个页脚文件，一个用于标题，一个用于菜单，然后，在您的页面中，您可以使用：

<?php include('header.php'); ?>

<?php include('menu.php'); ?>

<!-- Your content somewhere here -->

<?php include('footer.php'); ?>

Answer 2

如果由于某种原因限制只使用HTML / JS，可以使用jQuery的 load() 方法：

$('#menu').load('includes/menu.html');

这将从menu.html加载HTML并将其放在#menu元素中。但是，如果可能的话，请使用类似于Haza建议的内容。

Answer 3

如果您不想弄乱服务器内容，可以创建一个javascript函数，为您创建HTML，然后将其写入页面。例如

function writeNavigation(){
document.write("<nav>");
document.write("  <li> home <\/li>");
document.write("  <li> about <\/li>");
document.write("  <li> blog <\/li>");
document.write("</nav>");
}

这样，您就可以链接到HTML页面头部的文件，如下所示 - ＆gt;

然后，您可以在页面加载时简单地调用该函数 - ＆gt;

<script type='text/javascript'>
window.onload = writeNavigation()
</script>

但是，使用此方法没有回退方法，因此没有JavaScript的用户将没有菜单。

仅在一个地方编码菜单栏

3 个答案: