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"。完成后，在 body 标记 '' 结束之前编写以下脚本。

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

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

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