Question

我有一个网站，我想使用我的下拉菜单作为网站中任何链接的单独代码。 http://www.stelianpopa.ro/photo/ancar.html 我使用menu.html中的菜单代码，并根据此示例集成在网站上：http://api.jquery.com/load/ 代码已加载，但大多数情况下，下拉菜单不起作用，即使看起来已加载，它也只显示第一行，而不显示＆＃34;照片＆＃34;的子菜单。和＆＃34;视频＆＃34;

对此有何帮助？基本上我想要的是将我的菜单作为一个独立的文件，并加载到我网站上的任何html作为参考，因为当我想在菜单中添加一些内容时，我必须在每个单独的HTML上执行此操作并且＃39 ;为什么我想成为独立的，为每个HTML修改一次。抱歉我的英语不好。

Answer 1

如果还没有，请创建一个包含菜单（下拉列表）的html文件。

然后，在您要使用菜单的每个页面上，包含一个iframe，指向您为菜单创建的html文件。

例如：

Menu.html

<html>
<head></head>
<body>

<!-- code for menu -->

</body>
</html>

您想要使用

上的菜单的每个页面

<html>
<head>...</head>
<body>

<!-- content -->
<iframe src='path/to/menu.html'>Sorry, but your browser does not support iframe.</iframe>

</body>
</html>

希望这适合你。

Answer 2

没有模板，您可以使用javascript将模板加载到页面上。我会为此设置一个迷你项目，以避免复制粘贴，但基础知识低于

在您想要菜单的正文中：

<div id="my-nav-menu"></div>

脚本：

document.addEventListener('DOMContentLoaded', function() {
    var menu = document.getElementById('my-nav-menu');
    menu.innerHTML = 'menu html here';
});

<强>更新

我刚刚注意到了jquery标记，因此您可以使用以下脚本：

$(document).ready(function() {
    $('#my-nav-menu').html('menu html here');
});

在HTML页面中包含HTML页面

2 个答案: