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

Question

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

HMTL 导航：

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

原文由 blackRob4953 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这就是帮助我的。我的导航栏在 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-->

原文由 Ramtin 发布，翻译遵循 CC BY-SA 3.0 许可协议