菜单栏问题：如何 link 一个 html 文件到其他 html 文件？

Question

现在，我的所有 html 文件（home.html、about.html、contact.html）都有导航菜单栏 html 代码，但是我想知道是否有办法将导航栏 html 代码放在另一个文件中（即 menubar.html），并将该文件 link 放到我想要的 html 文件中导航栏。这样，如果我想更改导航栏，我只需要更改一个文件，而不是包含它的每个文件。关于如何做到这一点的任何想法？

Answer 1

目前 HTML 中还没有正确的“包含”方式。您可以使用 <iframe src="navbar.html"></iframe> 和自定义 css 来隐藏边框，使其看起来更平滑。但请注意，仍有两个 HTML 文件正在加载。

但是，HTML imports 将在未来 HTML 更新中使用 link 打包，如下所示：

<!DOCTYPE html>
<html lang="en-US">
    <head>
        <title>Page</title>
        <link rel="import" href="navbar.html">
    </head>
    <body>
        <p>What is a body without a heart?</p>
    </body>
</html>

但是您 可以使用 AJAX 来完成，如下所示：

<!DOCTYPE html>
<html>
<head>
    <title>Page</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
    <div id="navbar"></div>

    <script type="text/javascript">
        $("#navbar").load("navbar.html");
    </script>
</body>
</html>

PS：它在服务器端语言中也是可能的，比如PHP:

例如：include('navbar.php'); 在您的 anypages.php

菜单栏问题：如何 link 一个 html 文件到其他 html 文件？

Issue with menu bar: how to link a html file to other html files?

html

css

navbar