HTML包含带有相对链接的导航元素

Question

我在多个页面中都包含了一个导航元素，如下所示： <script> $(function(){ $("#includedNavigation").load("navigation.html"); }); </script> <script> $(function(){ $("#includedNavigation").load("navigation.html"); }); </script>

但这仅适用于同一目录“ subdir”中的html文件。 从上部主目录“ dir”中的index.html无法访问navigation.html。 如果我将上部模式添加到navigation.html上方目录中的index.html中，则可以正确访问，但相对链接不再起作用。 我不想用绝对路径替换相对链接。 是否可以根据其调用来源在navigation.html不同链接之间切换？ 还有其他想法吗？ 非常感谢！

Answer 1

由于这是一个多页网站，在其所有页面上都重复使用相同的菜单，因此page1.html和index.html之间的功能或逻辑上没有区别，除了索引可能是您看到的第一页。 因此，我只需要将index.html放在同一文件夹中，然后命名为一天即可。 如果索引页会将所有其他页面加载到自身中，则将其设置为较高级别是有意义的。 然后，该菜单仅需要包含在索引页面上。

文件夹结构是项目要求，而不是技术要求。 在开发中，所有页面都同样分为子目录，以便组织文件。 但是通过运行部署脚本将所有内容复制到生产环境中，部署脚本无论如何将所有内容连接到一个文件中，整个文件夹结构消失了。

拥有清晰的文件夹结构用于按业务需求组织的开发是完全正常的，并且对于按技术需求组织的实时代码也具有完全不同的文件夹结构。

Answer 2

您必须提供navigation.html文件的路径。

$（function（）{$（“＃includedNavigation”）。load（“ ./ dir / navigation.html”）;}）;

像这样

Answer 3

你能用这样的东西吗

<link rel="import" href="navigation.html">

要么

$(function(){ $("#includedNavigation").load("path/to/navigation.html"); });