Home > Article > Web Front-end > 用Jquery.load载入页面后样式没了页面混乱的解决方法_jquery

用Jquery.load载入页面后样式没了页面混乱的解决方法_jquery

WBOYOriginal: 2016-05-16 16:33:131711browse

因为开始不懂Jquery，一直想用jquery.load的方法载入新的页面，以实现局部刷新，结果发现载入进来的页面与原来单独的页面不一样，样式没了，后来在网上查了一下，发现了解决办法，这是别人的回答：

是这样的，如果不过滤掉一些内容的话，直接加载，会使页面混乱的，比如新的页面也存在

标签，加载进来后，一个页面就会存在两个标签是不规范的的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>

希望对你有帮助

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：jQuery实现的导航条切换可显示隐藏_jqueryNext article：Javascript中arguments对象详解_基础知识

See more

用Jquery.load载入页面后样式没了页面混乱的解决方法_jquery

Related articles