html - 如何在多个页面上重复使用导航栏？

Question

我刚刚制作完我的 home/index.html 页面。将导航栏保持在原处，并在用户点击我的所有页面时保持导航栏不变。我是否必须将导航代码复制并粘贴到每个页面的顶部？还是有另一种看起来更干净的方法？

HTML 导航:

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

Answer 1

这对我有帮助。我的导航栏在 body 标签中。导航栏的全部代码在 nav.html 文件中(没有任何 html 或 body 标签，只有导航栏的代码)。在目标页面中，这位于 head 标记中:

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

然后在 body 标签中，用唯一的 id 和一个 javascript block 创建一个容器，以将 nav.html 加载到容器中，如下所示:

<!--Navigation bar-->
<div id="nav-placeholder">

</div>

<script>
$(function(){
  $("#nav-placeholder").load("nav.html");
});
</script>
<!--end of Navigation bar-->