Question

我开始用HTML5编程。我正在做一个基本的导航菜单，其中包含指向＆＃34; 1.html＆＃34;，＆＃34; 2.html＆＃34;以及HTML页面等。问题是当导航按钮将我链接到＆＃34; 1.html＆＃34;页面新页面上传和导航菜单丢失。

有没有办法让导航菜单始终在屏幕上？我应该在每个页面中复制/粘贴导航菜单HTML代码吗？（我希望不会）

提前致谢。

Answer 1

你需要牢记这一点：
如果你打开一个html文档，它只会代表它的内容。它不能从所谓的“导航模板”继承，除非你为每个文档提供模板。

您可以使用普通的javascript创建导航，只需链接到每个文档中相应的js文件。
您可以使用框架集或简单的iframe（尽可能避免使用，但可能会解决您的问题）
您可以使用服务器预处理程序将多个html文件粘合在一起并在多个网址中使用您的内容
您可以将菜单复制并粘贴到每个文档
您可以使用像grunt或等于的任务运行器通过预编译模板创建最终文档
您可以通过xmlhttprequest（falsy称为ajax）使用javascript请求导航模板并将其添加到当前文档中

这就是你有的选择。

Answer 2

如果纯HTML：将iFrame用于标题和正文（或将标题代码复制/粘贴到每个页面）

<a href="http://stackoverflow.com" target="my-iframe">Home</a>
<a href="http://stackoverflow.com/help" target="my-iframe">Help</a>
<br/>

<iframe name="my-iframe" style="border: 0; height: 400px; width: 100%;"></iframe>

如果使用PHP：在每个页面中包含php文件：

<html>
    <?php include('common/header.php'); ?>
    <body>
        <?php include('common/menu.php'); ?>
        <h1>Hello World</1>
        <?php include('common/footer.php'); ?>
    </body>
</html>

如果使用jQuery：使用Ajax加载页面内容：

$('#header').load('common/header.html');

HTML网站导航

2 个答案: