使用javascript将navbar从不同文件夹加载到html页面

下面是我的html源代码结构

产品

software.html

hardware.html

index.html

main-navbar.html

剧本

load-main-nav.js

我已经将我的主导航栏移动到一个单独的文件中，因为它在每个页面中重复，并且正在使用javascript将其加载到相应的页面中。我想加载导航栏的页面中有一个空div

<div id="main-nav"></div>

---

我可以通过放置

<base href="../">

在software.html和hardware.html标题中。完成此操作后，您必须确保更新software.html和hardware.html中的所有链接，就好像它们是从顶部文件夹访问的一样。我还将把js放在每个文件中，使其看起来如下所示

<!--Navigation bar-->
<div id="main-nav"></div>

<script>
    $(function () {
        $("#main-nav").load("main-navbar.html");
    });
</script>
<!--end of Navigation bar-->

$（函数（）{
$（“#main nav”）.load（“main navbar.html”）；
});

关于此线程中基本标记的使用，已经进行了一些很好的讨论：

---

每个网站都是不同的，虽然我能够在我的一个网站上使用此方法，但我无法在另一个网站上有效地使用此方法（我无法在需要在本地哈希URL之间平滑转换的网站上使用此方法）。

main-nav.html和../main-nav.html作为路径之间存在差异。第二个是相对路径。如果只给出main-nav.html，则表示导航栏与您当前访问的页面位于同一文件夹中。因此，当您导航到Softwares.htm时，文件夹/目录是Softwares，因此只需指定main-nav.html即可搜索Softwares文件夹中的文件，该文件不在那里，因此无法加载。但是../main-nav.html将告诉它，文件位于当前文件夹上方一级的文件夹中，就像您的情况一样../显示应用程序的根目录，因此它将正确加载。当我使用../main-nav.html时，主nav不会加载到index.html页面中。这两个文件都在rootyes中，因为../显示当前文件夹上方的一个文件夹级别。。因此，请改用./main-nav.html，或者简单地使用/main-nav.html，以便更好地理解。当我尝试时，请看一下这篇文章。./main-nav.html它仍然与以前一样。然而，如果我使用/main-nav.html，导航栏不会同时显示在两个页面上，那么可能会出现其他问题，因为“/”始终指向根目录。和./main-nav.html应满足此目的。

<base href="../">

<!--Navigation bar-->
<div id="main-nav"></div>

<script>
    $(function () {
        $("#main-nav").load("main-navbar.html");
    });
</script>
<!--end of Navigation bar-->