现在,我的所有 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/