用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 新节点的创建 删除 的步骤
Jul 04 Javascript
javascript的数据类型、字面量、变量介绍
May 23 Javascript
jQuery循环滚动新闻列表示例代码
Jun 17 Javascript
jQuery选择器全集详解
Nov 24 Javascript
JS数组的常见用法实例
Feb 10 Javascript
jQuery实现页面滚动时动态加载内容的方法
Mar 20 Javascript
JS使用ajax方法获取指定url的head信息中指定字段值的方法
Mar 24 Javascript
深入学习JavaScript中的原型prototype
Aug 13 Javascript
js浏览器滚动条卷去的高度scrolltop(实例讲解)
Jul 07 Javascript
详解vue+css3做交互特效的方法
Nov 20 Javascript
React之PureComponent的使用作用
Jul 10 Javascript
微信小程序获取地理位置及经纬度授权代码实例
Sep 18 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字符串截取的简单方法
2013/07/04 PHP
php中file_get_contents与curl性能比较分析
2014/11/08 PHP
Smarty变量用法详解
2016/05/11 PHP
调用js时ie6和ie7,ff的区别
2009/08/19 Javascript
js 操作符实例代码
2009/10/24 Javascript
JQuery中判断一个元素下面是否有内容或者有某个标签的判断代码
2012/02/02 Javascript
javascript和HTML5利用canvas构建猜牌游戏实现算法
2013/07/17 Javascript
document.documentElement和document.body区别介绍
2013/09/16 Javascript
jQuery Masonry瀑布流插件使用详解
2014/11/17 Javascript
JavaScript中的Primitive对象封装介绍
2014/12/31 Javascript
jQuery中attr()方法用法实例
2015/01/05 Javascript
JavaScript点击按钮后弹出透明浮动层的方法
2015/05/11 Javascript
JavaScript节点及列表操作实例小结
2015/08/05 Javascript
JS封装的三级联动菜单(使用时只需要一行js代码)
2016/10/24 Javascript
vue.js如何更改默认端口号8080为指定端口的方法
2017/07/14 Javascript
JS实现的简单四则运算计算器功能示例
2017/09/27 Javascript
深入理解vuex2.0 之 modules
2017/11/20 Javascript
详解nodeJs文件系统(fs)与流(stream)
2018/01/24 NodeJs
解决vue中虚拟dom,无法实时更新的问题
2018/09/15 Javascript
vue+Element中table表格实现可编辑(select下拉框)
2020/05/21 Javascript
Vue组件间数据传递的方式(3种)
2020/07/13 Javascript
[17:00]DOTA2 HEROS教学视频教你分分钟做大人-帕克
2014/06/10 DOTA
用Python实现随机森林算法的示例
2017/08/24 Python
python3爬取淘宝信息代码分析
2018/02/10 Python
Flask-Mail用法实例分析
2018/07/21 Python
使用python 打开文件并做匹配处理的实例
2019/01/02 Python
Python2.x与3​​.x版本有哪些区别
2020/07/09 Python
flask项目集成swagger的方法
2020/12/09 Python
威尔逊皮革:Wilsons Leather
2018/12/07 全球购物
Java的五个基础面试题
2016/02/26 面试题
文秘专业自荐信
2013/10/14 职场文书
售后服务科岗位职责范文
2013/11/13 职场文书
电视购物广告词
2014/03/19 职场文书
2014年信访维稳工作总结
2014/12/08 职场文书
女性健康知识讲座通知
2015/04/23 职场文书
送给小学生的暑假礼物!小学生必背99首古诗
2019/07/02 职场文书