如何让html引用公共布局（多个html文件公用一个header.html和footer.html）
如何实现多个.html静态页，引用同一个header.html和footer.html文件？
直接上代码：
公共头部文件：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）的更多相关文章
- 024 如何让html引用公共的头部和尾部（多个html文件公用一个header.html和footer.html）
前端静态html页面,封装公共的头文件(header:顶部页眉,顶部导航栏等部分)和尾部文件(footer:CopyRight.友情链接等部分) 当前方法:通过load()函数,引入公共头部和尾部文件 ...
- MVC中的_viewstart.cshtml（没有设置Layout却引用了布局）
今天Home视图中新增了一个视图,因为不需要设置Layout就没与管他,但是运行起来一看,自动引用了布局,分析了半天 也没看出是哪的错误? 后来尝试着在area中增加了一个同样的视图就没有问题,比较这 ...
- 多个页面引用公共的头部 header.html 和尾部 footer.html
方法:通过load()函数,引入公共头部和尾部文件; js代码预览: $(".headerPage").load("header.html"); $(" ...
- 前端引用公共html模块方案
最近临时一个负责公司官网的妹纸请假,于是临时接手了下官网的项目,官网都是静态页面,算是很简单的,但发现页面挺多,而每个页面总有部分是和其他页面一模一样的,比如页头.页尾等,这样就导致一个地方的修改要在 ...
- linux ln 建立软链接-- 基于dubbo-zookeeper服务的 服务jar 引用公共的 lib
对于ln命令网上有很多的教程,这里不再复述, 其基本目的是:多个文件夹公用一个文件夹的里的文件. 其基本命令格式: ln [option] source_file dist_file (source_ ...
- 引用公共页面的js函数报错
对于网站来说很多页面之间都有着大量的共享模块,如页头,页脚和用户栏等.很多时候为了方便.省事,我们在公共模块写函数,然后在别的页面里调用.但我们在引用公共的js函数时,有些可以引用,有些却报错:这是因 ...
- 微信小程序引用外部js，引用外部样式，引用公共页面模板
https://blog.csdn.net/smartsmile2012/article/details/83414642 ================小程序引用外部js============= ...
- vue如何全局引用公共js
在项目开发中需要调用一些工具类方法,所以需要将公共方法放在公共js中,并且需要全局引用这些公共js 1:创建公共JS(utils.js) src/common/utils.js export def ...
- 原生aspx页面如何引用公共js和css
项目过程中遇到一个问题,每个页面需要引用很多的js和css文件,其中很多都是控件,而且大部分都是一样的,造成很多重复引用. 针对这种情况,参考了mvc的BundleConfig,思路是建立一个公用的用 ...
随机推荐
- 基于 Python 的自动文本提取：抽象法和生成法的比较
我们将现有的 提取方法(Extractive)(如LexRank,LSA,Luhn和Gensim现有的TextRank摘要模块)与含有51个文章摘要对的Opinosis数据集进行比较.我们还尝试使用T ...
- 即时通信WebSocket 和Socket.IO
WebSocket HTML5定义了WebSocket协议,能更好的节省服务器资源和带宽,并且能够更实时地进行通讯. 在2008年诞生,2011年成为国际标准. 现在基本所有浏览器都已经支持了. We ...
- 二维vector的使用
和数组一样,数组有二维的数组,vector也有二维的vector.下面就介绍一下二维vector的使用方法. 一般声明初始化二维vector有三种方法 (1) vector< vector< ...
- Docker镜像与仓库(四)
Dockerfile方式创建镜像 https://hub.docker.com/_/centos/ #找一个centos6.6 的dockerfile链接 [root@linux-node1 ~]# ...
- （转）如何学好C++语言
原文:http://coolshell.cn/articles/4119.html 作者:陈皓 昨天写了一篇如何学好C语言,就有人回复问我如何学好C++,所以,我把我个人的一些学习经验写在这里,希 ...
- cut,xargs,sort,tr,rename命令解析
cut 文件内容查看 显示行中的指定部分,删除文件中指定字段 显示文件的内容,类似于下的type命令. 语法: cut(选项)(参数) 选项: -b:仅显示行中指定直接范围的内容: -c:仅显示行中指 ...
- 【Linux网络基础】网络拓扑、OSI层次模型、TCP/IP协议簇
一.前言 一个运维有时也要和网络打交道,所以具备最基本的网络知识,对一个运维人员来说是必要的.但,对于我们的工作来说这些并不是重点,因此,我不可能从最基础的网络知识开始讲起.本节内容更多是从一个梳理和 ...
- Python3的日期和时间
2019独角兽企业重金招聘Python工程师标准>>> python 中处理日期时间数据通常使用datetime和time库 因为这两个库中的一些功能有些重复,所以,首先我们来比较一 ...
- mycat入门部署安装
mycat是一种比较简单的中间件产品,可以帮助mysql进行分库,同时统一在一个逻辑库. 硬件环境:系统:centos 7.6数据库版本:5.7.19mycat:1.6..6.1 github上下载m ...
- Java网络编程从入门到精通（27）：关闭服务端连接
在客户端和服务端的数据交互完成后,一般需要关闭网络连接.对于服务端来说,需要关闭Socket和ServerSocket. 在关闭Socket后,客户端并不会马上感知自已的Socket已经关闭,也就是说 ...