HTML - 在所有页面的导航栏上保持相同的项目

Question

我在https://shadowdragonp.github.io/ 拥有一个网站，使用了一个名为“Squadfree”的知名模板。

在导航栏上，有您的典型按钮，例如“主页”、“关于”、“联系人”等。但是，还有一个名为“门户”的下拉菜单（非超链接）你到各个子目录。尽管导航栏会根据子目录而有所不同，但“门户”菜单在每个页面上始终相同。

随着时间的推移，“门户”菜单将在列表中包含更多项目。当我将项目添加到门户菜单时，我不想编辑所有页面，因此我正在寻找一种可能重用 HTML 代码的方法。欢迎所有建议！

    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Portals <b class="caret"></b></a>
      <ul class="dropdown-menu">
        <li><a href="portals/music.html">Music</a></li>
        <li><a href="portals/games.html">Games</a></li>
        <li><a href="portals/software.html">Software</a></li>
        <li><a href="portals/images.html">Image Gallery</a></li>
      </ul>
    </li>

Answer 1

将新的 html 文件添加到类似 PortalSubMenu.html 的目录中。在这个新创建的 html 文档中编写要重用的代码。在您的情况下，它将是您在上面编写的代码。现在为您的导航栏分配一个 ID，让我们说 id="menu"。完成后，在正文标记 '' 结束之前编写以下脚本。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
//wait until the dom is fully loaded
$(document).ready(function () {
    //adds PortalSubMenu.html content into "#menu" element
    $('#menu').load('PortalSubMenu.html');
});
</script>

不要忘记从手册页中删除门户导航下拉菜单，因为这将来自不同的来源。有关更多信息，请查看此Stack Overflow thread Link

我希望你能实现你想要的，但我仍然建议你使用一些服务器端而不是纯 html。因为在这种情况下，您通常会有一个母版页或布局页，您可以在其中定义在您的网站上保持不变的内容。