jQuery分块加载头部尾部等

最新推荐文章于 2022-09-29 09:49:50 发布

Younge__

最新推荐文章于 2022-09-29 09:49:50 发布

阅读量8.9k

点赞数 1

分类专栏： jQuery javascript 文章标签： jquery html header footer

本文链接：https://blog.csdn.net/yongaini10/article/details/52397366

版权

jQuery 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

javascript

1 篇文章 0 订阅

订阅专栏

主HTML页面内容， main.html：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="css/jin.css">
</head>
<body>
	<div id="header"></div>
	<div id="main" style="height:500px;">
		
	</div>
	<div id="footer"></div>
	<script src="js/jquery-1.11.3.js"></script>
	<script>
	  $(function(){
	    $('#header').load('common/header.html');
	    $('#footer').load('common/footer.html');
	  })
	</script>
</body>
</html>

在main.html同目录下放置common目录，里面放置头HTML和尾HTML，header.html, footer.html

header.html:

<div id="top_box">
    <img src="images/star.jpg" />
    <a href="#">收藏京东</a>
    <div class="rt">   
        <ul>
            <li>您好，欢迎来到京东！<a href="#" >[登录]</a> <a href="#" >[免费注册]</a></li> 
            <li><b></b><a href="#" >我的订单</a></li> 
            <li class="vip"><b></b><a href="#" >会员俱乐部</a></li> 
            <li class="dakehu"><b></b><a href="#" >企业频道</a></li> 
            <li class="app_jd"><b></b><a href="#" >手机京东</a></li> 
            <li class="service"><b></b><a>客户服务</a></li>
            <li><b></b><a >网站导航</a></li> 
        </ul> 
    </div>
</div>

footer.html:

<div class="links">
	<a href="#">关于我们</a>|<a href="#">联系我们</a>|<a href="#">人才招聘</a>|<a href="#">商家入驻</a>|<a href="#">广告服务</a>|<a href="#">手机京东</a>|<a href="#">友情链接</a>|<a href="#">销售联盟</a>|<a href="#">京东社区</a>|<a href="#">京东公益</a>
</div>
<div class="copyright">北京市公安局朝阳分局备案编号110105014669  |  京ICP证070359号  |  互联网药品信息服务资格证编号(京)-非经营性-2011-0034<br />
    <a href="#">音像制品经营许可证苏宿批005号 </a> |  出版物经营许可证编号新出发(苏)批字第N-012号  |  互联网出版许可证编号新出网证(京)字150号<br />
    <a href="#">网络文化经营许可证京网文[2011]0168-061号 </a> Copyright © 2004-2014 京东JD.com 版权所有 <br />
    京东旗下网站：
    <a href="#">English Site</a> <a href="#">拍拍网</a> <a href="#">网银在线</a>
</div>
<div class="authentication">
    <a href=""><img src="images/jy.jpg" width="108" height="40" /></a>
    <a href=""><img src="images/kx.jpg" width="108" height="40" /></a>
    <a href=""><img src="images/cy.jpg" width="108" height="40" /></a>
    <a href=""><img src="images/cx.jpg" width="112" height="40" /></a>
</div>

在main.html同目录下，放置js目录里面放jquery-1.11.3.js.

头尾块放在末尾加载可以防止阻塞内容页面。