將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">longfei@longfeigj.com</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>longfei@longfeigj.com</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>