多页上的HTML/CSS导航栏?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (106)

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>
提问于
用户回答回答于

首先创建一个包含所有导航栏HTML内容的页面。

接下来,使用jQuery的$.get方法来获取页面的内容。例如,假设您已将所有导航栏的HTML放入一个调用的文件中,navigation.html<div id="nav-placeholder">在您的代码中添加了一个占位符标签(Like )index.html,那么将使用以下代码:

<script src="//code.jquery.com/jquery.min.js"></script>
<script>
$.get("navigation.html", function(data){
    $("#nav-placeholder").replaceWith(data);
});
</script>
用户回答回答于

我的导航条在车身标签里。导航栏的全部代码在nav.html文件(没有任何html或Body标记,只有导航栏的代码)。在目标页面中,这将在head标签:

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

如下所示:

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

</div>

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

扫码关注云+社区

领取腾讯云代金券