如何在多个页面上重用导航栏？
我刚刚完成了home/index.html页面的制作。使导航栏保持在原来的位置，并在用户单击我的所有页面时使其保持不变。我是否必须将导航代码复制并粘贴到每个页面的顶部？或者，有没有其他看起来更干净的方法呢？
HMTL nav：
<nav>
<div>
<a href="/">
<div id="logo"><img src="image.png" alt="Home"/></div>
<div id="headtag"><img src="image.png" alt="Home"/></div>
<div id="tagline"><img src="image.png" alt="Home"/></div>
</a>
</div>
<div>
<a href="/" class="here">Home</a>
<a href="/about.html" >About</a>
<a href="/services.html" >Services</a>
<a href="/pricing.html" >Pricing</a>
<a href="/contact.html" >Contact Us</a>
<input id="srchbar" type="search" placeholder="Search">
</div>
</nav>回答 5
Stack Overflow用户
发布于 2017-02-20 06:05:53
这就是对我有帮助的。我的导航栏在body标签中。导航栏的整个代码都在nav.html文件中(没有任何html或body标签，只有导航栏的代码)。在目标页面中，这放在head标记中：
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>然后在body标记中，使用一个唯一的id和一个javascript块创建一个容器，以便将nav.html加载到容器中，如下所示：
<!--Navigation bar-->
<div id="nav-placeholder">
</div>
<script>
$(function(){
$("#nav-placeholder").load("nav.html");
});
</script>
<!--end of Navigation bar-->Stack Overflow用户
发布于 2015-11-24 00:38:05
我知道这是一个相当古老的问题，但是当您有可用的JavaScript时，您可以使用jQuery及其AJAX方法。
首先，创建一个包含导航栏的所有HTML内容的页面。
接下来，使用jQuery的$.get方法获取页面内容。例如，假设您已将所有导航栏的超文本标记语言放入一个名为navigation.html的文件中，并在index.html中添加了一个占位符标记(如<div id="nav-placeholder">)，然后您将使用以下代码：
<script src="//code.jquery.com/jquery.min.js"></script>
<script>
$.get("navigation.html", function(data){
$("#nav-placeholder").replaceWith(data);
});
</script>Stack Overflow用户
发布于 2018-08-26 17:13:08
一种非常古老但足够简单的技术是使用"Server-Side Includes"，将HTML页面包含到具有.shtml扩展的顶级页面中。例如，这将是您的index.shtml文件：
<html>
<head>...</head>
<body>
<!-- repeated header: note that the #include is in a HTML comment -->
<!--#include file="header.html" -->
<!-- unique content here... -->
</body>
</html>是的，它很差劲，但它是有效的。记住在您的HTTP服务器配置(this is how to do it for Apache)中启用SSI支持。
https://stackoverflow.com/questions/31954089
复制相似问题