• 35648

    文章

  • 23

    评论

  • 20

    友链

  • 最近新加了很多技术文章,大家多来逛逛吧~~~~
  • 喜欢这个网站的朋友可以加一下QQ群,我们一起交流技术。

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

欢迎来到阿八个人博客网站。本 阿八个人博客 网站提供最新的站长新闻,各种互联网资讯。 喜欢本站的朋友可以收藏本站,或者加QQ:我们大家一起来交流技术! URL链接:https://www.sghongmei.com/jinjia/2019/0821/107410.html 1190000020144193

通过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>
注意
load函数里最好不要写本地的文件,容易引起跨域问题导致浏览器找不到页面,我这里是用域名来解决的

相关文章

暂住......别动,不想说点什么吗?
  • 全部评论(0
    还没有评论,快来抢沙发吧!