如何让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,思路是建立一个公用的用 ...
随机推荐
- Asp.Net Core 3.0 学习3、Web Api 文件上传 Ajax请求以及跨域问题
1.创建Api项目 我用的是VS2019 Core3.1 .打开Vs2019 创建Asp.Net Core Web应用程序命名CoreWebApi 创建选择API 在Controller文件夹下面添加 ...
- testNG 断言
testNG提供一个Assert类,来判断输出值是否与预期值一致,Assert常用的方法有: Assert.assertEquals():此方法可以有两个参数值,也可以有3个参数值,参数的顺序是 ac ...
- Spring Cloud+nacos+Feign，实现注册中心及配置中心
写在前面 注册中心.配置中心的概念就不在这里解释了.发现服务原来一直用的是Eureka,因为这家伙闭源了,不爽.然后就发现了nacos,阿里巴巴的,好东西,一个搞定注册中心和配置中心.官网:https ...
- kubernetes的cni0和flannel.1的关系？
当容器运行之后,节点之间多了个虚拟接口cni0,它是由flanneld创建的一个虚拟网桥叫cni0,供pod本地通信使用.flanneld为每个pod创建一对veth虚拟设备,一端放在容器接口上,一端 ...
- Ansible playbook 编程
Ansible playbook 编程详解与各种小案例 主机规划 添加用户账号 说明: 1. 运维人员使用的登录账号: 2. 所有的业务都放在 /app/ 下「yun用户的家目录」,避免业务数据乱放: ...
- Linux系统防火墙相关操作
服务器重启后防火墙会自动开启,需要把防火墙关闭 以下为对防火墙进行的相关操作 查看防火墙状态 systemctl status firewalld service iptables status 暂时 ...
- Net core项目实战篇01---EFCore CodeFirs For Mysql 数据库初始化
从今天开始我们用Net Core进行项目实战,采用微服务构架,因此你会看到我各模块开始都是用的web api.项目中的代码直接可以复制.费话不多说,现在就来跟我一起开始吧! 1.打开VS2017—&g ...
- CSS样式1
编写CSS样式: 1.标签的style属性 如:<div style="width:980px;"></div> 2.写在head里面,style标签中写样 ...
- 使用@vue/cli搭建vue项目开发环境
当前系统版本 mac OS 10.14.2 1.安装node.js开发环境 前端开发框架和环境都是需要 Node.js vue的运行是要依赖于node的npm的管理工具来实现 <mac OS ...
- bibernate中inverse和cascade用法
一口一口吃掉Hibernate(八)--Hibernate中inverse的用法 [转自 http://blog.csdn.net/xiaoxian8023 ] 一.Inverse是hibernate ...