用Jquery.load载入页面后样式没了页面混乱的解决方法


Posted in Javascript onOctober 20, 2014

因为开始不懂Jquery,一直想用jquery.load的方法载入新的页面,以实现局部刷新,结果发现载入进来的页面与原来单独的页面不一样,样式没了,后来在网上查了一下,发现了解决办法,这是别人的回答:

是这样的,如果不过滤掉一些内容的话,直接加载,会使页面混乱的,比如新的页面也存在<body>标签,加载进来后,一个页面就会存在两个<body>标签是不规范的的HTML。这个是在jquery.load()函数中规定的。一般加载进来的页面需要自己根据加载的内容的元素重新定义CSS样式和添加js事件的。比如:

原页面A.html:

<html>
<head><title></title></head>
<body>
<div id="container"></div>
</body></html>
被load的页面B.html:
<html>
<head><title></title></head>
<style>.page-li {font-size:12px;color:blue}</style>
<body>
<div id="page">
<ol class="page-li">
<li>234123</li><li>341234</li><li>41234</li><li>412de34</li>
</ol>
</div>
</body></html>

在原页面A.html中加载调用的jquery.load(),然后再在原页面对 page-li 的样式重新定义下就可以了:

添加了load(),css的原页面:

<html>
<head><title></title></head>
<style>.page-li {font-size:12px;color:green}</style>
<body>
<div id="container"></div>
<script type="text/javascript">
$(function(){
$("#container").load("B.html #page",null,function(){alert("加载成功")});
});
</script>
</body></html>

希望对你有帮助

Javascript 相关文章推荐
JS 两日期相减,获得天数的小例子(兼容IE,FF)
Jul 01 Javascript
Javascript的严格模式strict mode详细介绍
Jun 06 Javascript
JS基于MSClass和setInterval实现ajax定时采集信息并滚动显示的方法
Apr 18 Javascript
js canvas实现QQ拨打电话特效
May 10 Javascript
细说webpack源码之compile流程-rules参数处理技巧(2)
Dec 26 Javascript
原生JS实现的碰撞检测功能示例
May 18 Javascript
浅谈Redux中间件的实践
Jul 27 Javascript
vue中设置、获取、删除cookie的方法
Sep 21 Javascript
微信小程序云开发如何实现数据库自动备份实现
Aug 16 Javascript
详解简单易懂的 ES6 Iterators 指南和示例
Sep 24 Javascript
JS实现点星星消除小游戏
Mar 24 Javascript
JS+CSS实现炫酷光感效果
Sep 05 Javascript
Javascript+CSS实现影像卷帘效果思路及代码
Oct 20 #Javascript
利用jquery操作Radio方法小结
Oct 20 #Javascript
利用a标签自动解析URL分析网址实例
Oct 20 #Javascript
JavaScript严格模式禁用With语句的原因
Oct 20 #Javascript
jquery中页面Ajax方法$.load的功能使用介绍
Oct 20 #Javascript
JavaScript sup方法入门实例(把字符串显示为上标)
Oct 20 #Javascript
iframe里面的元素触发父窗口元素事件的jquery代码
Oct 19 #Javascript
You might like
php 广告调用类代码(支持Flash调用)
2011/08/11 PHP
PHP和JavaScrip分别获取关联数组的键值示例代码
2013/09/16 PHP
非常实用的PHP常用函数汇总
2014/12/17 PHP
php结合正则批量抓取网页中邮箱地址
2015/05/19 PHP
PHP简单预防sql注入的方法
2016/09/27 PHP
php使用正则表达式去掉html中的注释方法
2016/11/03 PHP
js类中获取外部函数名的方法与代码
2007/09/12 Javascript
jQuery + Flex 通过拖拽方式动态改变图片的代码
2011/08/03 Javascript
解析javascript 实用函数的使用详解
2013/05/10 Javascript
Javascript中各种trim的实现详细解析
2013/12/10 Javascript
初始Nodejs
2014/11/08 NodeJs
ajax读取数据后使用jqchart显示图表的方法
2015/06/10 Javascript
JS实现部分HTML固定页面顶部随屏滚动效果
2015/12/24 Javascript
jQuery图片前后对比插件beforeAfter用法示例【附demo源码下载】
2016/09/20 Javascript
JavaScript 拖拽实例代码
2016/09/21 Javascript
KVM虚拟化技术之使用Qemu-kvm创建和管理虚拟机的方法
2016/10/05 Javascript
Java中int与integer的区别(基本数据类型与引用数据类型)
2017/02/19 Javascript
AngularJS实现的生成随机数与猜数字大小功能示例
2017/12/25 Javascript
JS实现的字符串数组去重功能小结
2019/06/17 Javascript
vuex 多模块时 模块内部的mutation和action的调用方式
2020/07/24 Javascript
[00:32]2018DOTA2亚洲邀请赛Newbee出场
2018/04/03 DOTA
Python简单生成8位随机密码的方法
2017/05/24 Python
python3 读写文件换行符的方法
2018/04/09 Python
python_opencv用线段画封闭矩形的实例
2018/12/05 Python
python pyinstaller 加载ui路径方法
2019/06/10 Python
python利用百度云接口实现车牌识别的示例
2020/02/21 Python
深入浅析CSS3中的Flex布局整理
2020/04/27 HTML / CSS
SmartBuyGlasses荷兰:购买太阳镜和眼镜
2020/03/16 全球购物
LINUX下线程,GDI类的解释
2012/04/17 面试题
工商管理本科毕业生求职信范文
2013/10/05 职场文书
运动会通讯稿200字
2014/02/16 职场文书
暑假安全保证书
2015/02/28 职场文书
主持人开场白台词
2015/05/29 职场文书
运动会新闻报道稿
2015/07/22 职场文书
如何判断微信付款码和支付宝付款码
2021/04/01 PHP
MySQL中的 inner join 和 left join的区别解析(小结果集驱动大结果集)
2023/05/08 MySQL