用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实现随机返回数组的一个元素
Aug 13 Javascript
比较全的JS checkbox全选、取消全选、删除功能代码
Dec 19 Javascript
javascript中数组array及string的方法总结
Nov 28 Javascript
原生javascript实现简单的datagrid数据表格
Jan 02 Javascript
详解JavaScript中shift()方法的使用
Jun 09 Javascript
详解iframe与frame的区别
Jan 13 Javascript
原生js仿jquery animate动画效果
Jul 13 Javascript
js前端实现多图图片上传预览的两个方法(推荐)
Nov 18 Javascript
Sublime Text新建.vue模板并高亮(图文教程)
Oct 26 Javascript
使用vue的transition完成滑动过渡的示例代码
Jun 25 Javascript
JavaScript定时器设置、使用与倒计时案例详解
Jul 08 Javascript
微信小程序官方动态自定义底部tabBar的例子
Sep 04 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操作sqlserver关于时间日期读取的小小见解
2009/11/29 PHP
优化php效率,提高php性能的一些方法
2011/03/24 PHP
Smarty变量调节器失效的解决办法
2014/08/20 PHP
php bootstrap实现简单登录
2016/03/08 PHP
javascript 面向对象思想 附源码
2009/07/07 Javascript
js 变量类型转换常用函数与代码[比较全]
2009/12/01 Javascript
JavaScript 面向对象的 私有成员和公开成员
2010/05/13 Javascript
jquery validate添加自定义验证规则(验证邮箱 邮政编码)
2013/12/04 Javascript
JavaScript实现的购物车效果可以运用在好多地方
2014/05/09 Javascript
JavaScript获取页面上被选中文字的方法技巧
2015/03/13 Javascript
javascript适合移动端的日期时间拾取器
2015/11/10 Javascript
AngularJS 工作原理详解
2016/08/18 Javascript
HTML的select控件美化
2017/03/27 Javascript
详解react-router如何实现按需加载
2017/06/15 Javascript
Vue-component全局注册实例
2018/09/06 Javascript
react的滑动图片验证码组件的示例代码
2019/02/27 Javascript
vue实现树形结构样式和功能的实例代码
2019/10/15 Javascript
JS跨浏览器解析XML应用过程详解
2020/10/16 Javascript
python自动化测试之连接几组测试包实例
2014/09/28 Python
Python实现快速排序算法及去重的快速排序的简单示例
2016/06/26 Python
python numpy函数中的linspace创建等差数列详解
2017/10/13 Python
Python类和对象的定义与实际应用案例分析
2018/12/27 Python
Python玩转PDF的各种骚操作
2019/05/06 Python
对python中的os.getpid()和os.fork()函数详解
2019/08/08 Python
Python 实现递归法解决迷宫问题的示例代码
2020/01/12 Python
PyPDF2读取PDF文件内容保存到本地TXT实例
2020/05/12 Python
Django form表单与请求的生命周期步骤详解
2020/06/07 Python
python修改微信和支付宝步数的示例代码
2020/10/12 Python
AmazeUI 按钮交互的实现示例
2020/08/24 HTML / CSS
C#里面如何判断一个Object是否是某种类型(如Boolean)?
2016/02/10 面试题
秋季校运动会广播稿
2014/02/23 职场文书
班级年度安全计划书
2014/05/01 职场文书
2014党员整改措施思想汇报
2014/10/07 职场文书
小学班主任个人总结
2015/03/03 职场文书
八年级数学教学反思
2016/02/17 职场文书
对Keras自带Loss Function的深入研究
2021/05/25 Python