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

本文介绍了如何在多个页面上重复使用导航栏?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

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

I just finished making my home/index.html page. To keep the nav bar where it is, and have it stay while users click through all my pages. Do I have to copy and paste the nav code to the top of each page? Or is there another way to do so that would look cleaner?

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>

推荐答案

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

This is what helped me. My navigation bar is in the body tag. Entire code for navigation bar is in nav.html file (without any html or body tag, only the code for navigation bar). In the target page, this goes in the head tag:

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

然后在body标签中，使用唯一的ID和一个javascript块制作一个容器，以将nav.html加载到该容器中，如下所示:

Then in the body tag, a container is made with an unique id and a javascript block to load the nav.html into the container, as follows:

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