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>

html头部尾部分离组件引入（JQ）相关推荐

超实用BRVAH开源框架使用之添加头部尾部问题
小白入坑,大佬轻喷~~ 参考: BRVAH官方使用指南(持续更新) Github地址前言: BRVAH是一个强大的RecyclerViewAdapter开源库,代码简洁高效,优点如下: ·框架引入 ...
React-aplayer音乐播放组件引入
React-aplayer音乐播放组件引入博客更新日志(一)之 react-aplayer引入博客前台使用的技术栈:Next.js+React Hooks+Antd+Axios 一款可爱的很火的音 ...
webpack构建Vue项目引入jQ时发生“'$' is defined but never used”的处理
今天公司需要新建个数据后台,就按照查到的方法构建了Vue框架的项目,引入jQ.bootstrap时,按照在线方法配置,发现 main.js 里的引用jQ一直显示红标,没多想,在按照网上配置完后,npm ...
Vue2.0 --- vue-cli脚手架中全局引入JQ
第一步:安装jQuery npm/cmpn方式安装(默认安装1.7.X版本的JQ) npm/cnpm install jQuery 如果想安装更高版本的JQ那么可以选择在package.json文件下 ...
recycleview 使用详解，添加头部尾部，混合item，侧滑菜单，跳转到指定位置，实现九宫格布局
添加头部尾部,混合item:https://blog.csdn.net/meixi_android/article/details/82256319 侧滑菜单:https://blog.csdn.ne ...
vue-cli项目中单文件组件引入bootstrap.js异常的解决方案
vue-cli项目中单文件组件引入bootstrap.js异常的解决方案参考文章: (1)vue-cli项目中单文件组件引入bootstrap.js异常的解决方案 (2)https://www.cn ...
vue 项目在index.html页面直接引入jq库，报错$ is not defined解决方案
近日在vue项目开发中遇到一个问题:vue 项目在index.html页面直接引入jq库,报错$ is not defined解决方案... 首先说一下为什么会出现这个错误,其实项目发布到线上是不会出 ...
uniapp 自制头部左侧胶囊组件
uniapp 自制头部左侧胶囊组件 // 组件页面 <template><view class="navigation-bar" :style="{he ...
Vue：自定义组件引入单页面+动态绑定图片
Vue2,Vue3,动态绑定图片通过自定义组件向单页面组件引入普通属性 component文件下的Header.vue: <template><div><h1>{ ...

html头部尾部分离组件引入（JQ）

html头部尾部分离组件引入（JQ）相关推荐

最新文章

热门文章