html头部尾部分离组件引入(JQ)

html写官网之类,我们经常会有很多页面同一头部和尾部,我们把它们分离出来,组件引入
vue等框架类的就不说了,主要是说html原生态的
(如果是PHP文件可以直接include() 或 require() 函数引入html文件)
用到JQ里面的load方法

<body><div class="headerpage"></div><div></div><div class="footerpage"></div>
</body>

定义节点名,在此节点中引入相应版块

$(".headerpage").load("../header.html",()=>{$('.jingM').addClass('cdk');
});
$(".footerpage").load("../footer.html");

第一个参数是组件路径,第二个参数可以是引入完成是的回调函数

此时要注意一点

如果你头部尾部组件内有js逻辑,此逻辑需要写在相应的组件中

比如header.html

<div class='header'>header组件内容
</div>
<script>//header组件中的方法$('.goLoadApp').click(function () {Cookies.set('loadApp', 1);window.location.href = '../'})
</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/407705.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

[Oracle]使用滚动游标

源代码&#xff1a;xx.pc /*功能&#xff1a;演示了Oracle滚动游标操作定义游标时注意事项&#xff1a;1. DECLARE CURSOR语句必须是使用游标的第一条语句2. 游标名称是一个标识符&#xff0c;而不是宿主变量&#xff0c;其长度是可以任意的&#xff0c;但只有前31个字符有效3…

CMOS密码安全攻略

要说密码。首先就是CMOS密码了。CMOS(本意是指互补金属氧化物半体存储器&#xff0c;是一种大规模应用于集成电路芯片制造的原料)是电脑主板上的一块可读写的RAM芯片&#xff0c;主要用来保存当前系统的硬件配置。CMOS RAM芯片由系统通过一块后备电池供电&#xff0c;所以无论是…

Taro+react开发(22)--模态框组件

<AtModalisOpened{isOpend}title"标题"cancelText"取消"confirmText"确认"onClose{this.handleClose}onCancel{this.handleCancel}onConfirm{this.handleConfirm}content"确认删除吗"/>

JQ trigger触发a标签点击事件

trigger() 方法触发被选元素的指定事件类型。 $("a").trigger(click) ;这样直接触发a标签上的点击事件无法生效 需要绑定给a标签的子集 $("a span").trigger(click) ;jq触发a标签跳转成功

xmpp muc 群聊协议 3

6. Entity Use Cases A MUC implementation MUST support Service Discovery [7]. 服务端必须实现 service discover 6.1 Discovering Component Support for MUC 发现服务器是否支持muc A Jabber entity may wish to discover if a service implements the Multi-User Chat pr…

Vue基础之Class和Style绑定

既然v-bind可以动态绑定标签的属性&#xff0c;那么也可以用v-bind来处理class和style&#xff0c;只需要计算出表达式最终的字符串。不过&#xff0c;字符串拼接麻烦又易错。因此&#xff0c;在 v-bind 用于 class 和 style 时&#xff0c; Vue.js 专门增强了它。表达式的结果…

Pro*c使用滚动游标进行更新或删除游标行

代码&#xff1a;xx.pc /* 功能&#xff1a;演示了Oracle滚动游标进行更新(或删除)操作定义游标时注意事项&#xff1a; 1. DECLARE CURSOR语句必须是使用游标的第一条语句 2. 游标名称是一个标识符&#xff0c;而不是宿主变量&#xff0c;其长度是可以任意的&#xff0c;但只有…

Silverlight学习笔记之使用TranslateTransform控制对象位置

在Canvas中,除了直接使用Canvas.Top与Canvas.Left属性之外,我们可以使用TextBlock.RenderTransform的TranslateTransform的X与Y属性来控制文本显示的位置。代码如下&#xff1a;<TextBlockText"Hello TranslateTransform"Canvas.Left"34" Canvas.Top&qu…

Taro+react开发(23)--componentWillReceiveProps

componentWillReceiveProps# void componentWillReceiveProps(object nextProps ) 当props发生变化时执行&#xff0c;初始化render时不执行&#xff0c; 在这个回调函数里面&#xff0c;你可以根据属性的变化&#xff0c;通过调用this.setState() 来更新你的组件状态&#xff…

MVC Area Usage

ASP.NET MVC Area操作 新建 Area&#xff1a;右键 -> Add –> Area继承 AreaRegistration&#xff0c;重写AreaName属性与RegisterArea方法 public class BookStudyAreaRegistration : AreaRegistration {public override string AreaName{get{return "BookStudy&qu…

[Pro*c]滚动游标变量的使用

代码&#xff1a;xx.pc /* 功能&#xff1a;演示了Oracle滚动游标变量的使用定义游标时注意事项&#xff1a; 1. DECLARE CURSOR语句必须是使用游标的第一条语句 2. 游标名称是一个标识符&#xff0c;而不是宿主变量&#xff0c;其长度是可以任意的&#xff0c;但只有前31个字…

css裁剪clip-path画多边形

clip-path有三种属性 第一种 circle 画圆 clip-path: circle(30%); 30%为半径大小 clip-path: circle(50% at 50% 50%); 后面的50%为圆心位置 第二种 ellipse 椭圆 clip-path: ellipse(32% 43% at 49% 50%); 32%为宽 43%为高 后面两个49%&#xff0c;50%为圆心位置 第三种 p…

教你培养成功的必备因素——强烈的企图心

企图心没有教&#xff0c;但是可以培养&#xff0c;我可以教你如何培养自己的企图心 有一次我上安东罗宾的课程&#xff0c;在夏威夷&#xff0c;安东罗宾的课程有很多世界第一名演讲&#xff0c;分享他们成为冠军的经验。安东罗宾请了一个马拉松选手&#xff0c;这个马拉松不是…

Vue基础之Vue条件渲染

v-if 在 Vue.js &#xff0c;我们使用 v-if 指令实现的功能 也可以用 v-else 添加一个 “else” 块 template-if 因为 v-if 是一个指令&#xff0c;需要将它添加到一个元素上。但是如果我们想切换多个元素呢&#xff1f;此时我们可以把一个<template>元素当做包装…

React开发(100):3.0没有image

./src/pages/Goods/Brand/index.js Module not found: Cant resolve antd/es/image in E:\shangjiahoutai\yoao-static-pc-merchant\src\pages\Goods\Brand

pro*C/C++支持c++开发实例

Pro*C/C同时支持C和C&#xff0c;但是当预编译包含C代码的PC源程序时&#xff0c;必须合理地设置相关的预编译选项。 代码&#xff1a;xx.pc /*功能&#xff1a;演示了Pro*C/C源程序生成C源文件说明&#xff1a;Pro*C/C支持C和C。当预编译包含C代码的PC源程序时&#xff0c;必…

用cocos2d-html5做的消除类游戏《英雄爱消除》(1)——系统主菜单

系统主菜单如下图所示&#xff1a; 首先&#xff0c;介绍下这个主菜单&#xff0c;它包含了一个动画logo以及一个按钮选项&#xff0c;动画logo每隔1秒钟切换一张图片&#xff0c;点击相应的按钮选项会切换不同的游戏场景。 下面看下这个界面的源码&#xff1a; /*** Power by …

推荐一篇文章,.net3.0新特性

推荐一篇文章&#xff0c;.net3.0新特性 http://www.codeproject.com/KB/cs/csharp3.aspx转载于:https://www.cnblogs.com/yukaizhao/archive/2007/12/21/net30.html

一些实用却很少用到的css以及标签

1、p:first-letter p标签里的第一个字设置样式 p:first-letter { font-size:200%; color:#8A2BE2; }<p>My best friend is Mickey.</p>2、p:first-line p标签里的设置第一行样式 3、:not&#xff08;p&#xff09; 设置非 p元素的所有元素的背景色 4、<hr>…

Vue基础之Vue列表渲染

列表渲染 我们用 v-for 指令根据一组数组的选项列表进行渲染。 v-for 指令需要以 item in items 形式的特殊语法&#xff0c; items 是源数据数组并且 item 是数组元素迭代的别名 基本用法&#xff1a; 在 v-for 块中&#xff0c;我们拥有对父作用域属性的完全访问权限。 v-f…