用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中this关键字使用方法详解
Mar 08 Javascript
10个基于jQuery或JavaScript的WYSIWYG 编辑器整理
May 06 Javascript
jquery构造器的实现代码小结
May 16 Javascript
三级下拉菜单的js实现代码
May 23 Javascript
jsPDF导出pdf示例
May 02 Javascript
js文本框走动跑马灯效果代码分享
Aug 25 Javascript
js 获取范围内的随机数实例代码
Aug 02 Javascript
angularjs数组判断是否含有某个元素的实例
Feb 27 Javascript
分享vue里swiper的一些坑
Aug 30 Javascript
实例分析编写vue组件方法
Feb 12 Javascript
JavaScript函数式编程(Functional Programming)高阶函数(Higher order functions)用法分析
May 22 Javascript
layui使用表格渲染获取行数据的例子
Sep 13 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
高分R级DC动画剧《哈莉·奎茵》第二季正式预告首发
2020/04/09 欧美动漫
推荐一款PHP+jQuery制作的列表分页的功能模块
2014/10/14 PHP
js树形控件脚本代码
2008/07/24 Javascript
JavaScript 学习笔记 Black.Caffeine 09.11.28
2009/11/30 Javascript
淘宝网提供的国内NPM镜像简介和使用方法
2014/04/17 Javascript
JavaScript中property和attribute的区别详细介绍
2015/03/03 Javascript
js+CSS实现模拟华丽的select控件下拉菜单效果
2015/09/01 Javascript
纯javascript实现自动发送邮件
2015/10/21 Javascript
JavaScript中${pageContext.request.contextPath}取值问题及解决方案
2016/12/08 Javascript
微信小程序图片横向左右滑动案例
2017/05/19 Javascript
JavaScript中的一些隐式转换和总结(推荐)
2017/12/22 Javascript
jQuery实现的点击标题文字切换字体效果示例【测试可用】
2018/04/26 jQuery
解决Layui选择全部,换页checkbox复选框重新勾选的问题方法
2018/08/14 Javascript
微信小程序整合使用富文本编辑器的方法详解
2019/04/25 Javascript
vue实现记事本功能
2019/06/26 Javascript
jquery树形插件zTree高级使用详解
2019/08/16 jQuery
layui复选框的全选与取消实现方法
2019/09/02 Javascript
微信小程序实现滑动翻页效果(完整代码)
2019/12/06 Javascript
Vue循环中多个input绑定指定v-model实例
2020/08/31 Javascript
如何使用gpu.js改善JavaScript的性能
2020/12/01 Javascript
Python程序中的观察者模式结构编写示例
2016/05/27 Python
Django model序列化为json的方法示例
2018/10/16 Python
Python函数的参数常见分类与用法实例详解
2019/03/30 Python
使用 Python 快速实现 HTTP 和 FTP 服务器的方法
2019/07/22 Python
Flask框架学习笔记之模板操作实例详解
2019/08/15 Python
python二元表达式用法
2019/12/04 Python
基于html5 canvas做批改作业的小插件
2020/05/20 HTML / CSS
Lacoste美国官网:经典POLO衫品牌
2016/10/12 全球购物
美体小铺加拿大官方网站:The Body Shop加拿大
2016/10/30 全球购物
九年级家长会邀请函
2014/01/15 职场文书
赔偿协议书范本
2014/04/15 职场文书
永远跟党走演讲稿
2014/09/12 职场文书
学习十八大演讲稿
2014/09/15 职场文书
初中班主任心得体会
2016/01/07 职场文书
MySQL系列之五 视图、存储函数、存储过程、触发器
2021/07/02 MySQL
jQuery实现广告显示和隐藏动画
2021/07/04 jQuery