HTML静态页面引用公共的头部和底部

43次阅读

共计 803 个字符，预计需要花费 3 分钟才能阅读完成。

通过 load() 函数，分别引入公共头部和底部文件;

header.html 顶部页面

<!DOCTYPE html>
<html>
    <head>
        <link href="./header.css" rel="stylesheet">
    </head>
    <body>
       <div class="header">
           <h4> 头部 </h4>
       </div>
   </body>
</html>

footer.html 底部页面

<!DOCTYPE html>
<html>
    <head></head>
    <body>
       <div class="footer">
           <h4> 这里是底部 </h4>
       </div>
   </body>
</html>

index.html 正文页面

<!DOCTYPE html>
<head></head>
<body>
    <!-- 顶部导航 -->
    <div class="headerpage"></div>
    <!-- 顶部导航 over-->    

    <!-- 中部主体 --> 
        <p> 正文部分 </p>
    <!-- 中部主体 over-->  

    <!--footer-->  
    <div class="footerpage"></div>
    <!--footer over-->
    <script src="js/jquery-3.3.0.min.js"></script>
    <script>
        $(function(){
            /* 公共部分
            * 导航栏
            * footer CopyRight
            */
            // $(".headerpage").load("load/header.html");
            $(".headerpage").load('http://www.load.com/header.html');
            $(".footerpage").load("http://www.load.com/footer.html");
        });
    </script>
</body>
</html>