Question

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

在导航栏上，有一些典型的按钮，例如“home”，“about”，“contact”等。但是，还有一个名为“Portals”的下拉菜单（不是超链接）你到各个子目录。虽然导航栏根据子目录而变化，但“门户”菜单在每个页面上始终是相同的。

随着时间的推移，“门户”菜单将在列表中包含更多项目。当我将项目添加到门户菜单时，我不想编辑所有页面，所以我正在寻找一种可能重用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 =＆＃34; menu＆＃34;。完成后，在正文标记结束之前编写以下脚本。

。

<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。因为在这种情况下，您通常会有一个母版页或布局页面，您可以在其中定义在您的网站中保持相同的内容。

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

1 个答案: