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

最新推荐文章于 2023-02-23 18:58:55 发布

李子建

最新推荐文章于 2023-02-23 18:58:55 发布

阅读量1.3k

点赞数 1

分类专栏：头尾分离文章标签： html

本文链接：https://blog.csdn.net/weixin_42835782/article/details/109601489

版权

头尾分离专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

李子建

关注关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
html头部尾部分离组件引入（JQ）

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

扫一扫