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

【问题标题】：Loading navbar into html page from different folders using javascript使用javascript将导航栏从不同文件夹加载到html页面
【发布时间】：2016-05-25 03:19:45
【问题描述】：

以下是我的html源码结构。

产品

软件.html

硬件.html

index.html

main-navbar.html

脚本

加载主导航.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>

加载-main-nav.js

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

【问题讨论】：

main-nav.html 和 ../main-nav.html 作为路径是有区别的。第二个是相对路径。当您只提供 main-nav.html 时，这意味着导航栏与您现在正在访问的页面位于同一文件夹中。因此，当您导航到 Softwares.htm 时，文件夹/目录是 Softwares，因此只需指定 main-nav.html 将在 Softwares 文件夹中搜索它不存在的文件，因此不会加载。但是 ../main-nav.html 会告诉它文件存在于当前文件夹上一级的文件夹中，因为在您的情况下 ../ 显示应用程序的根目录，因此它将正确加载。
当我使用 ../main-nav.html 时，主导航不会加载到 index.html 页面中。这两个文件都在根目录中
是的，因为 ../ 显示当前文件夹上方的文件夹级别.. 所以改为使用 ./main-nav.html 或简单地使用 /main-nav.html 以便更好地理解看看这个发布stackoverflow.com/questions/296873/…
当我尝试 ./main-nav.html 时，它仍然和以前一样。而如果我使用 /main-nav.html，导航栏不会显示在两个页面上
可能还有其他问题，因为“./”总是指向根目录。和 ./main-nav.html 应该服务于目的。

标签： javascript html css

【解决方案1】：

我能够通过放置

来完成此操作（无需使用 php）

<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-->

在这个线程中对 base 标签的使用进行了一些很好的讨论：

What are the recommendations for html <base> tag?

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

【讨论】：