标签:demo 其他 ack copyright over 导航栏 不用 copy 头部
直接上代码:
公共头部文件: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="js/jquery.min.js"></script> <script> $(function(){ /*公共部分 * 导航栏 * footer CopyRight */ $(".headerpage").load("header.html"); $(".footerpage").load("footer.html"); }); </script> </body> </html>
通过上面的描述,可以发现:
在header.html和footer.html文件中,并非是标准的html文档格式! 与此同时,通过index.html中的jQuery函数load()将上述的两个公共文件引入进来,从而形成一个完整的页面; 并且,不会影响到其他页面对于公共文件的引用和使用;
以上就是关于静态html文件,使用公共头部和尾部的解决办法之一。
如何让html引用公共布局(多个html文件公用一个header.html和footer.html)
标签:demo 其他 ack copyright over 导航栏 不用 copy 头部
原文地址:https://www.cnblogs.com/shine1234/p/12899579.html