Question

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

产品


software.html

hardware.html


的index.html

主navbar.html

脚本


负载主nav.js

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

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

我已设法使用jscript将导航栏加载到index.html页面。但是，当我单击软件链接时，它会转到相应的页面，但不会显示导航栏。当我将javascript更改为$（“＃main-nav”）。load（“../ main-nav.html”）;它显示“软件”页面的导航栏，但不显示index.html。有没有办法可以更改位置部分，以便我可以在项目的任何文件夹中使用相同的脚本文件？

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

负载主nav.js

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

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

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

使用javascript

1 个答案: