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

Question

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

但这仅适用于同一目录“ subdir”中的html文件。从上部主目录“ dir”中的index.html无法访问navigation.html。 如果我正确地将上部模式添加到index.html上方目录中的navigation.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"); });