javascript - 使用javascript将导航栏从不同的文件夹加载到html页面

Question

以下是我的html源代码结构。

Products

software.html

hardware.html

index.html

主导航栏.html

脚本

load-main-nav.js

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

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

我已经设法使用 jscript 将导航栏加载到 index.html 页面中。但是，当我单击 Software 链接时，它会转到相应的页面，但不会显示导航栏。当我将 javascript 更改为 $("#main-nav").load("../main-nav.html");它显示软件页面的导航栏，但不显示 index.html。有没有一种方法可以更改位置部分，以便我可以对元素中任何文件夹中的文件使用相同的脚本？

main-navbar.html

<nav class="navbar navbar-default mc-header navbar-static-top">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mc-collapse-nav">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a href="../index.html"><img id="logo" src="images/logo.svg" alt="Company Logo"></a>
    </div>
    <div id="mc-collapse-nav" class="collapse navbar-collapse mc-navbar-spacing">
        <ul class="nav navbar-nav navbar-right" >
            <li><a href="Products/software.html">Software</a></li>
            <li><a href="Products/hardware.html">Hardware</a></li>
        </ul>
    </div>
</nav>

load-main-nav.js

$(function(){
    $("#main-nav").load("main-nav.html");
});

Answer 1

我能够通过放置

来完成此操作(无需使用 php)

<base href="../">

在 software.html 和 hardware.html header 中。执行此操作后，您必须确保更新 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-->

在此线程中对 base 标记的使用进行了一些很好的讨论:

What are the recommendations for html <base> tag?

每个网站都是不同的，虽然我能够在我的一个网站上使用这种方法，但我无法在另一个网站上有效地使用它(我无法在需要本地哈希之间平滑过渡的网站上使用它网址)。