用Jquery.load载入页面后样式没了页面混乱的解决方法
更新时间：2014年10月20日 17:30:26 投稿：whsnow
一直想用jquery.load的方法载入新的页面，以实现局部刷新，结果发现样式没了，后来发现了解决方法，如果不过滤掉一些内容的话，直接加载，会使页面混乱的
因为开始不懂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>
希望对你有帮助
相关文章
这篇文章主要介绍了JQuery插入DOM节点的方法,实例分析了jQuery实现DOM结点插入所涉及的常见函数使用技巧,需要的朋友可以参考下2015-06-06
之前，我们减少字节数和请求次数以及加载顺序以使页面加载的更快。如今，我们越来越多的注意到另一个影响网站性能的部分--CPU利用率。使用 jQuery和其他JavaScript框架，使节点选择和DOM操作变得越来越容易，如果使用不当，有可能影响整个网页的响应速度。2016-06-06
jQuery学习笔记之jQuery的动画，需要的朋友可以参考下。2010-12-12
这篇文章主要介绍了jQuery中slideUp()方法用法,以实例形式分析了slideUp()方法的功能、定义及具体使用技巧,具有一定的参考借鉴价值,需要的朋友可以参考下2014-12-12
很多App中,新闻或者展示类都存在下拉刷新和上拉加载的效果，如何实现上拉刷新下拉加载更多页面的呢？下面小编通过下面内容给大家介绍jQuery模拟原生态App上拉刷新下拉加载更多页面及原理，需要的朋友可以参考下2015-08-08
下面代码可以把一个页面容器中的表单元素封装成一个json对象2013-11-11
Jquery+AJAX实现无刷新上传并重命名文件操作示例【PHP后台接收】
这篇文章主要介绍了Jquery+AJAX实现无刷新上传并重命名文件操作,结合实例形式分析了jQuery+ajax前台上传文件与PHP后台接收处理相关操作技巧,需要的朋友可以参考下2020-05-05
这篇文章主要为大家详细介绍了JQuery ztree带筛选、异步加载实例，zTree支持静态 和 Ajax 异步加载节点数据，并支持极其灵活的checkbox或radio选择功能，本文为大家进行具体介绍2016-02-02
本文分为jsp代码和后台代码给大家介绍了基于jQuery实现的Ajax 验证用户名唯一性，非常不错，具有参考借鉴价值，需要的的朋友参考下吧2017-06-06
Jquery 过滤器(first,last,not,even,odd)的使用
Jquery 过滤器，顾名思义就是过滤一些不需要的元素，主要有first,last,not,even,odd等等，下面有个使用示例，大家可以感受下2014-01-01
最新评论