用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 相关文章推荐
javascript 装载iframe子页面,自适应高度
Mar 20 Javascript
轻轻松松学JS调试(不下载任何工具)
Apr 14 Javascript
通过判断JavaScript的版本实现执行不同的代码
May 11 Javascript
javascript 获取网页标题代码实例
Jan 22 Javascript
Jquery中使用show()与hide()方法动画显示和隐藏图片
Oct 08 Javascript
bootstrap提示标签、提示框实现代码
Dec 28 Javascript
vue引入新版 vue-awesome-swiper插件填坑问题
Jan 25 Javascript
通过vue提供的keep-alive减少对服务器的请求次数
Apr 01 Javascript
解决vue项目中type=”file“ change事件只执行一次的问题
May 16 Javascript
详解js静态检查工具eslint配置文件
Nov 23 Javascript
微信小程序学习笔记之跳转页面、传递参数获得数据操作图文详解
Mar 28 Javascript
Vue.js实现备忘录功能
Jun 26 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
40年前的这部特摄片恐龙特级克塞号80后的共同回忆
2020/03/08 日漫
最贵的咖啡是怎么产生的,它的风味怎么样?
2021/03/04 新手入门
php excel reader读取excel内容存入数据库实现代码
2012/12/06 PHP
php数组声明、遍历、数组全局变量使用小结
2013/06/05 PHP
Mysql的Root密码忘记,查看或修改的解决方法(图文介绍)
2013/06/14 PHP
PHP正则表达式 /i, /is, /s, /isU等介绍
2014/10/23 PHP
php采用file_get_contents代替使用curl实例
2014/11/07 PHP
thinkPHP3.x常量整理(预定义常量/路径常量/系统常量)
2016/05/20 PHP
php实现将base64格式图片保存在指定目录的方法
2016/10/13 PHP
PHP分页显示的方法分析【附PHP通用分页类】
2018/05/10 PHP
用Javascript 获取页面元素的位置的代码
2009/09/25 Javascript
bgsound 背景音乐 的一些常用方法及特殊用法小结
2010/05/11 Javascript
javascript ajax的5种状态介绍
2014/08/18 Javascript
JavaScript实现16进制颜色值转RGB的方法
2015/02/09 Javascript
JavaScript实现form表单的多文件上传
2020/03/27 Javascript
Angularjs的键盘事件的绑定
2017/07/27 Javascript
vue router-link传参以及参数的使用实例
2017/11/10 Javascript
解决vue接口数据赋值给data没有反应的问题
2018/08/27 Javascript
js简单的分页器插件代码实例
2019/09/11 Javascript
python修改操作系统时间的方法
2015/05/18 Python
Python处理命令行参数模块optpars用法实例分析
2018/05/31 Python
深入理解Python异常处理的哲学
2019/02/01 Python
Python实现DDos攻击实例详解
2019/02/02 Python
Python selenium 加载并保存QQ群成员,去除其群主、管理员信息的示例代码
2020/05/28 Python
利用python批量爬取百度任意类别的图片的实现方法
2020/10/07 Python
Lookfantastic瑞典:英国知名美妆购物网站
2018/04/06 全球购物
Bravofly德国:预订廉价航班和酒店
2019/09/22 全球购物
写出一个方法实现冒泡排序
2016/07/08 面试题
求职简历的自我评价怎样写好
2013/10/07 职场文书
公司财务总监岗位职责
2013/12/14 职场文书
无故旷工检讨书
2014/01/26 职场文书
俄语专业职业生涯规划
2014/02/26 职场文书
党的群众路线教育实践活动个人承诺书
2014/05/22 职场文书
2014年幼儿园后勤工作总结
2014/11/10 职场文书
开业庆典嘉宾致辞
2015/08/01 职场文书
使用PostGIS完成两点间的河流轨迹及流经长度的计算(推荐)
2022/01/18 PostgreSQL