HTML / CSS导航栏在多个页面上 [英] HTML/CSS Navigation Bar on multiple pages

问题描述

我刚刚完成了我的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：

<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标签，只有导航栏的代码）。在目标页面中，它出现在头标记中：

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="https://code.jquery.com/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-->

这篇关于HTML / CSS导航栏在多个页面上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！