将header部分和footer部分提取出来，各保存为header.html和footer.html。
header.html（P.S.1：此次有导航跳转页面改变导航样式）
<nav class="hidden-sm hidden-xs"> <div class="topHeader"> <div class="container"> <div class="row"> <div class="col-lg-4"> <img class="img-responsive pcNavLogo" src="../img/fixed/longFeiLogo.png" /> </div> <div class="col-lg-4"> <div class="search input-group"> <input type="text" class="form-control" placeholder="Search"> <span class="input-group-btn"> <button class="btn btn-default" type="button"><span class="glyphicon glyphicon-search"></span></button> </span> </div> <!-- /input-group --> </div> <div class="col-lg-4"> <p class="title">联系我们：</p> <p class="text">CN：1394****881/ US：818-3**-8**8</p> <p class="text">[email protected]</p> </div> </div> </div> </div> <div class="container"> <nav> <ul class="pcNav"> <li> <a href="index.html">首页</a> </li> <li> <a href="overseasMedical.html">海外医疗</a> </li> <li> <a href="telemedicine.html">远程会诊</a> </li> <li> <a href="upscaleExperience.html">高端体验</a> </li> <li> <a href="latestDrugs.html">最新药品</a> </li> <li> <a href="aboutUs.html">关于我们</a> </li> </ul> </nav> </div> </nav> <nav class="paidNav hidden-md hidden-lg navbar navbar-default"> <div class="container"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#mainNav" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="index.html"><img class="img-responsive paidNavLogo" src="../img/fixed/longFeiLogo.png" /></a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="mainNav"> <ul class="nav navbar-nav navbar-right"> <li> <a href="index.html">首页</a> </li> <li> <a href="overseasMedical.html">海外医疗</a> </li> <li> <a href="telemedicine.html">远程会诊</a> </li> <li> <a href="upscaleExperience.html">高端体验</a> </li> <li> <a href="latestDrugs.html">最新药品</a> </li> <li> <a href="aboutUs.html">关于我们</a> </li> </ul> </div> <!-- /.navbar-collapse --> </div> <!-- /.container-fluid --> </nav>
<!-- 跳转改变导航样式js必须写在header.html里面，如在index.html等其他页面写或引入，则无效 --> <script type="text/javascript"> $(document).ready(function() { $(".pcNav li a").each(function() { if($(this)[0].href == String(window.location)) { $(this).parent("li").addClass("active"); } }); }) </script>
footer.html
<div class="container"> <div class="row"> <div class="col-xs-12 col-sm-6 col-md-3"> <img class="img-responsive" style="height: 60px;" src="../img/fixed/longFeiLogo.png" alt="" /> <p class="text">****总部设在加州洛杉矶。****医疗健康中心于美国一流医院建立官方合作为中国患者提供海外医疗全程咨询与健康服务的专业机构，是海外医疗行业的先行者与服务的领导者。</p> </div> <div class="col-xs-12 col-sm-6 col-md-3"> <ul> <li> <a href="index.html">首页</a> </li> <li> <a href="overseasMedical.html">海外医疗</a> </li> <li> <a href="telemedicine.html">远程会诊</a> </li> <li> <a href="upscaleExperience.html">高端体验</a> </li> <li> <a href="latestDrugs.html">最新药品</a> </li> <li> <a href="aboutUs.html">关于我们</a> </li> </ul> </div> <div class="col-xs-12 col-sm-6 col-md-3"> <div class="contents"> <p>周一 - 周五: 08:00 - 19:00</p> <p>周六和周日关闭</p> </div> <div class="contents"> <p>CN：1394****881</p> <p>US：818-3**-8**8</p> <p>[email protected]</p> </div> <div class="contents"> <p>1050 L**** Dr Ste **0, ****, CA 91**0</p> </div> </div> <div class="col-xs-12 col-sm-6 col-md-3"> <ul class="share"> <li> <a href=""><img class="img-circle img-responsive" src="" /></a> </li> <li> <a href=""><img class="img-circle img-responsive" src="" /></a> </li> <li> <a href=""><img class="img-circle img-responsive" src="" /></a> </li> <li> <a href=""><img class="img-circle img-responsive" src="" /></a> </li> </ul> </div> </div> </div> <div class="container-fluid"> <div class="copyright"> <p class="text-center">© Copyright Longfei 2019 .All Rights Reserved. </p> </div> </div>
其他html引入头部尾部，如：
index.html
<!DOCTYPE html> <html lang="zh-CN"> <head> <link rel="icon" href="../img/fixed/logo.ico" type="image/x-icon" /> <link rel="shortcut icon" href="../img/fixed/logo.ico" type="image/x-icon" /> <!--告诉浏览器准备接受一个 HTML 文档--> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <!--默认编码UTF-8--> <meta charset="UTF-8"> <!--默认采用webkit模式--> <meta name="renderer" content="webkit" /> <!--IE=edge告诉IE使用最新的引擎渲染网页，chrome=1则可以激活Chrome Frame--> <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"> <!--(设置确保适当的绘制和触屏缩放)--> <meta name="viewport" content="width=device-width, initial-scale=1"> <!--是否启用 WebApp 全屏模式，删除苹果默认的工具栏和菜单栏--> <meta name="apple-mobile-web-app-capable" content="yes"> <!--控制状态栏显示样式--> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <!--手机号码不被显示为拨号链接--> <meta name="format-detection" content="telephone=no" /> <!--Email不被显示为发送Email链接--> <meta name="format-detection" content="email=no"> <!--关键字--> <meta name="keywords" content="" /> <!--描述信息--> <meta name="description" content="" /> <!--作者--> <meta name="author" content="lgsp_Harold-Hua"> <title>Index</title> <!--重置部分默认样式--> <link rel="stylesheet" type="text/css" href="../css/normalize.css" /> <!--bootstrap框架样式--> <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css"> <!--动画样式--> <link rel="stylesheet" type="text/css" href="../css/animate.css" /> <!--公共样式--> <link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="../css/global.css" /> <!--私有样式--> <link rel="stylesheet" type="text/css" href="../css/index.css" /> <!--公共js--> <script src="../js/jquery-3.3.1.min.js"></script> <script src="../js/bootstrap.min.js"></script> <!--私有js--> </head> <body> <!-- header --> <header class="headerpage"> </header> <section> ···代码省略··· </section> <!-- footer --> <footer class="footerpage"> </footer> <script> $(function() { /*公共部分 * 导航栏 * footer CopyRight */ $(".headerpage").load("header.html"); $(".footerpage").load("footer.html"); }); </script> </body> </html>