如何让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,思路是建立一个公用的用 ...
随机推荐
- Laravel 5.7 RCE (CVE-2019-9081)
Laravel 代码审计 环境搭建 Laravel 5.7 文档 : https://learnku.com/docs/laravel/5.7/installation/2242 Composer 下 ...
- B站百大UP主党妹被黑客勒索!!!
4月27日,哔哩哔哩视频网站的UP主“机智的党妹”发布消息称,自己被黑客勒索了.她的视频表示:“事发突然,我被勒索了,你也有可能继续被诈骗!这种诈骗的页面是由病毒程序自动生成并留在那里的.”根据她的介 ...
- sqli lab 1-4
less-1 爆库 id=1222' union select 1,group_concat(schema_name),database() from information_schema.schem ...
- tp5中“前置操作”和“钩子函数”的区别
1.实行顺序: 以下都是标为删除前的操作: 点击删除 -> 前置操作 -> 删除方法(用模型删除) -> 触发钩子函数(删除) -> 删除成功 2.传入的参数: ...
- Nginx四层代理
Nginx支持四层代理 http://nginx.org/en/docs/stream/ngx_stream_core_module.html 该ngx_stream_core_module模块自1. ...
- Codeforces Round #635 (Div. 2) 题解
渭城朝雨浥轻尘,客舍青青柳色新. 劝君更尽一杯酒,西出阳关无故人.--王维 A. Ichihime and Triangle 网址:https://codeforces.com/contest/133 ...
- 【高并发】又一个朋友面试栽在了Thread类的stop()方法和interrupt()方法上!
写在前面 新一轮的面试已经过去,可能是疫情的原因吧,很多童鞋纷纷留言说今年的面试题难度又提高了,尤其是对并发编程的知识.我细想了下,也许有那么点疫情的原因吧,但无论面试的套路怎么变,只要掌握了核心知识 ...
- 通用权限管理系统组件 (GPM - General Permissions Manager)
有的公司开发人员只那么几个,一个人支撑整个公司所有的IT系统实在有点累,不想自己写权限系统了,自己琢磨不也是要花时间和精力,要为此付出多少时间和汗水阿,细细的皱纹不知要多多少呢,重复建设不是白白浪费生 ...
- windows下遍历文件夹
Github地址 函数: HANDLE WINAPI FindFirstFile( _In_ LPCTSTR lpFileName, _Out_ LPWIN32_FIND_DATA lpFindFil ...
- C++获取当前系统时间并格式化输出
C++中与系统时间相关的函数定义在头文件中. 一.time(time_t * )函数 函数定义如下: time_t time (time_t* timer); 获取系统当前日历时间 UTC 1970- ...