排行榜 统计
  • 建站日期:2016-01-06
  • 文章总数:89 篇
  • 评论总数:613 条
  • 分类总数:9 个
  • 最后更新:5月27日
热文前端技术

如何实现多个html静态页,引用同一个头部header.html和底部footer.html文件?

本文阅读 2 分钟

今天在扒一个站,然后发现里面有很多东西,如果一个一个改就太麻烦了,然后找了找方法。


1

通过index.html中的jQuery函数load()来实现!

首先准备好.html文件、header.html和footer.html文件。
还有需要调用的JQ文件,这里清酒准备好了,可以直接调用!

javascript
<script src="https://www.iqjty.com/js/jquery.min.js"></script>

直接上代码:

需要作为公共头部文件:header.html

//不用写标准的html文档格式
<div>
头部文件内容
</div>

需要作为公共尾部文件:footer.html

//不用写标准的html文档格式
<div> 
     页脚内容
</div>

js文件:

当前方法:通过load()函数,引入公共头部和尾部文件;

代码预览: 
$(".headerpage").load("header.html"); 
$(".footerpage").load("footer.html");

html全部文件:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>demo演示</title>
    <link rel="stylesheet" href="css/style.css" />
</head>
<body>
<!-- 顶部导航 -->
<div class="headerpage"></div>
<!--顶部导航 over-->    

<!--中部主体--> 
    <p>···代码省略···</p>
<!--中部主体 over-->  

<!--footer-->  
<div class="footerpage"></div>
<!--footer over-->

<script src="https://www.iqjty.com/js/jquery.min.js"></script>
<script>
    $(function(){
        /*公共部分
         * 导航栏
         * footer CopyRight
         */
        $(".headerpage").load("header.html");
        $(".footerpage").load("footer.html");
    });
</script>
</body>
</html>

通过上面的描述,可以发现:

header.htmlfooter.html文件中,并非是标准的html文档格式!
与此同时,通过index.html中的jQuery函数load()将上述的两个公共文件引入进来,从而形成一个完整的页面;
并且,不会影响到其他页面对于公共文件的引用和使用;

以上就是关于静态html文件,使用公共头部和尾部的解决办法之一。(内部分名称需要自己根据自己的CSS属性修改)

原创文章,作者:清酒,如若转载,请注明出处:https://blog.lkxin.cn/archives/559.html
如何开放分享自己的百度统计的统计报告给其他人查看
« 上一篇 08-11
【几部新剧推荐】李达康配李丰田!这阵容必须追啊!
下一篇 » 01-23
广告

发表评论

成为第一个评论的人

作者信息

热门文章

标签TAG

热评文章