html - 菜单栏问题 : how to link a html file to other html files?

标签 html css navbar

现在,我的所有 html 文件(home.html、about.html、contact.html)上都有导航菜单栏 html 代码,但我想知道是否有办法将导航栏 html 代码放在另一个文件中文件(即 menubar.html)并将该文件链接到我想要导航栏所在的 html 文件。这样,如果我想更改导航栏,我只需要更改一个文件,而不是每个包含它的文件。关于如何做到这一点有什么想法吗?

最佳答案

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

但是,HTML imports将使用如下链接打包在 future HTML 更新中:

<!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

关于html - 菜单栏问题 : how to link a html file to other html files?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30135109/

相关文章:

css - IE 不读取媒体查询

Javascript 跨浏览器问题

html - bootstrap 4 导航栏的背景颜色问题

html - 有没有办法修复导航选项卡的位置

html - 我怎样才能让某些字母在彼此上方直接对齐?

javascript - 按 T​​ab 键附加输入字段

javascript - 更新多个垂直条

css - 在 Twitter Bootstrap 的媒体查询中更改导航栏内部颜色

html - css 向 iframe 添加阴影效果

javascript - AngularJS - 按钮 - 在依赖之前调用函数或指令