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

我拥有一个网站https://shadowdragonp.github.io/，使用一种名为“Squadfree”的着名模板。HTML - 在导航栏上为所有页面保留相同的项目

在导航栏上，有一些典型的按钮，例如“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>

来源

2017-04-13 ShadowDragon

因为添加新的页面意味着我必须在每个HTML文件中更改代码后，我就无法向我的网站取得进展。对于任何愿意帮助的人来说，您的专业知识都是非常感谢 – ShadowDragon

将一个新的html文件添加到类似PortalSubMenu.html的目录中。在这个新创建的html文档中写入你想要重用的代码。在你的情况下，它会成为你上面写的代码。现在为您的导航栏指定一个ID让我们说ID =“菜单”。完成后，在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>

不要忘了从人向下翻页删除门户网站导航下降，因为这会从不同的源来。欲了解更多信息看看这Stack Overflow thread Link

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

来源

2017-04-13 05:25:30

感谢您的快速响应！我放置了您在''标签之前编写的代码。我还将以前的代码复制到新的“PortalSubMenu.html”文件中，但下拉菜单不显示。如果“index.html”文件只在最后被引用，如何知道将“PortalSubMenu.html”代码放置在哪里？ – ShadowDragon

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

回答

相关问题