一、问题描述
目前在做公司的一个网站，静态页面有很多，顶部导航和底部导航都是相同的，在每个页面中写头部和底部是可以的，但是修改
起来特别费时费力，后期很难维护。那么如何实现多个.html静态页，引用同一个header.html和footer.html文件呢？
前端静态html页面，封装公共的头文件（header：顶部页眉，顶部导航栏等部分）和尾部文件（footer：CopyRight、友情链接等部分）
HTML如何引用公共的页眉头部header.html文件和尾部footer.html文件？下面就来记录一下常用的方法：
二、解决方案
当前方法：通过load()函数，引入公共头部和尾部文件;
代码预览：
<div id="head"></div> <script type="text/javascript"> $('#head').load('components/head.html'); $('#footer').load('components/footer.html'); </script>
三、示例代码
header.html顶部导航部分的静态页面，全部代码示下：
<div class="head"> <img src="img/logo.png" class="logo" alt=""/> <div class="wrapper"> <nav><img src="img/logo.png" class="logos" alt=""/> <div id="drop"> <div> <span></span> <span></span> <span></span> </div> </div> </nav> <ul> <li><a href="index.html">首页</a></li> <li><a href="service_case.html">服务案例</a></li> <li><a href="product_center.html">产品中心</a></li> <li><a href="media_center.html">媒体中心</a></li> <li><a href="operating_center.html">运营中心</a></li> <li><a href="service_and_support.html">服务与支持</a></li> <li><a href="about_us.html">关于我们</a></li> </ul> </div> </div> <script type="text/javascript"> $('#drop, nav ~ ul li').click(function() { $('nav, #drop span').toggleClass('open'); $(window).scrollTop(0); }); $('#drop>div').click(function(){ $('.logos').toggleClass('blo') }) </script>
其次，看一下footer.html文件，全部代码示下：
<footer class="footer"> <p class="return">回到顶部<span class="glyphicon glyphicon-menu-up"></span></p> <ul id="accordion" class="accordion"> <li> <div class="link">服务案例<i class="glyphicon glyphicon-menu-right"></i></div> </li> <li> <div class="link">产品中心<i class="glyphicon glyphicon-menu-right"></i></div> </li> <li> <div class="link">媒体中心<i class="glyphicon glyphicon-menu-right"></i></div> </li> <li> <div class="link"><a href="operating_center.html" style="color: #a5a5a5;">运营中心</a></div> </li> <li> <div class="link">服务与支持<i class="glyphicon glyphicon-menu-right"></i></div> </li> <li> <div class="link"><a href="about_us.html" style="color: #a5a5a5;">关于我们</a></div> </li> </ul> <div class="footer_qrcode"> <img src="img/weixin_qrcode.png" alt="" /> <p> <a>关注公众号</a> <a>了解更多资讯</a> </p> <hr /> <span>© 2012-2020 版权所有</span> <span>****科技有限公司<a style="color: #ffffff" href="http://www.beian.miit.gov.cn" target="_blank"> 沪ICP备16004537号-1</a></span> </div> </footer> <script type="text/javascript"> $(function() { var Accordion = function(el, multiple) { this.el = el || {}; this.multiple = multiple || false; var links = this.el.find('.link'); links.on('click', {el: this.el, multiple: this.multiple}, this.dropdown) } Accordion.prototype.dropdown = function(e) { var $el = e.data.el; $this = $(this), $next = $this.next(); $next.slideToggle(); $this.parent().toggleClass('open'); if (!e.data.multiple) { $el.find('.submenu').not($next).slideUp().parent().removeClass('open'); }; } var accordion = new Accordion($('#accordion'), false); }); //滑动高度监测 var scrollTop; var timer = null; //监测当前屏幕高度 window.onscroll = function() { scrollTop = document.documentElement.scrollTop || document.body.scrollTop; return scrollTop; } //点击返回顶部 $('.return').click(function(){ clearInterval(timer); timer = setInterval(function() { var now = scrollTop; var speed = (0 - now) / 10; speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); if(scrollTop == 0) { clearInterval(timer); } document.documentElement.scrollTop = scrollTop + speed; document.body.scrollTop = scrollTop + speed; }, 35) }) </script>
最后，看一下index.html文件，全部代码示下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <meta name="description" content="" /> <meta name="keywords" content="" /> <title>首页</title> <link rel="stylesheet" type="text/css" href="css/common.css"/> <link rel="stylesheet" type="text/css" href="css/join_investment_details.css"/> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/> <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script> </head> <body> <!--通用顶部导航--> <div id="head"></div> <script type="text/javascript"> $('#head').load('components/head.html') </script> <!--通用顶部导航 结束--> <!--热点资讯列表--> <section class="join_investment_details"> <div class="details-img"> <img src="img/join_investment_info/18.png" alt=""> </div> <div class="details-content container_content"> <h5>开业支持</h5> <p>选择、设计、驻店指导</p> <ul> <li>选址支持：公司协助在当地高端建材城优先选择最优店面</li> <li>设计支持：店面智能化方案免费设计，制作最佳的客户体验动线。</li> <li>驻店指导：店面管理标准化打造，运营部门统一输出指导</li> <li></li> </ul> </div> </section> <!--热点资讯列表 结束--> <script src="js/jquery.min.js"></script> <script src="js/popper.min.js"></script> <script src="js/bootstrap.min.js"></script> <!--通用底部导航--> <div id="footer"></div> <script type="text/javascript"> $('#footer').load('components/footer.html') </script> <!--通用底部导航 结束--> </body> </html>
通过上面的描述，可以发现：
在header.html和footer.html文件中，并非是标准的html文档格式！
与此同时，通过index.html中的jQuery函数load()将上述的两个公共文件引入进来，从而形成一个完整的页面；并且，不会影响到
其他页面对于公共文件的引用和使用；
以上就是关于静态html文件，使用公共头部和尾部的解决办法之一。
关于其他方法，以后再补充。
完结！
