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

我在多个页面中包含了一个导航元素，如下所示：

$（function（）{$（“#includedNavigation”）.load（“navigation.html”）；}

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

您必须给出navigation.html文件的路径

$（function（）{$（“#includedNavigation”）.load（“./dir/navigation.html”）；}）；
像这样你能用这样的东西吗

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

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

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

按照业务需求组织开发时，有一个清晰的文件夹结构是完全正常的，按照技术需求组织实时代码时，也有一个完全不同的文件夹结构。
所有使用navigation.html的页面的目录结构应与相对路径相同。如果只有一个页面使用navigation.html，只需将其中的所有相对链接更改为相对于index.html目录结构，而不是navigation.html目录结构。从navigation.html和我们可以看到的目录树中找到任何示例链接吗？@Shilly。谢谢我添加了一个草图以澄清结构。所有页面都应有相同的菜单。所以所有的函数都包含：`$（function（）{$（“#includedNavigation”）.load（“navigation.html”）；}`和
。简单的解决方案是确保index.html和所有页面位于同一目录中，以便它们都可以使用“/pageX.html”。由于这是一个多页面网站，在所有页面上重复使用相同的菜单，所以page1和index之间没有功能或逻辑上的区别，除了index可能是您看到的第一个页面。所以我会把index.html放在同一个文件夹中，今天到此为止。如果索引页面将所有其他页面加载到自身中，则将其置于更高级别是有意义的。那么菜单就只需要包含在索引页上了。嗯，听起来很实用。但是文件夹中的分组有助于提供清晰的概述，例如通过主题来显示不同的页面。@gaurav_krishna:在子目录中包含navigation.html没有问题。但是从
index.html
的角度来看，没有
/page1.html
像
page2.html
这样的例子。@Staphan_Golubev:谢谢你的回答。我尝试了第二种选择。我可以从每个目录中包含
navigation.html
，但是
navigation.html
中的相对链接不再工作，因为路径是相对于调用文件的，并且没有固定到
navigation.html
。
$(function(){ $("#includedNavigation").load("path/to/navigation.html"); });