用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 mobile页面跳转后样式丢失js失效的解决方法，包括了jquery mobile页面跳转后样式丢失js失效的解决方法的使用技巧和注意事项，需要的朋友参考一下 用ajax跳转的时候，从a.html跳转到b.html后，b.html的css以及js都失效了。 方法： 将当前页面b.html需要用到的css以及js放在<page>div内。 原理： 由于jqm的ajax跳转
-
页面和样式 Docusaurus 支持在 website/pages 文件夹中将页面编写为 React 组件，该文件夹将与网站的其他部分共享相同的页眉，页脚和样式。 页面的 URL website/pages 中的任何 .js 文件将使用 "pages" 之后的文件路径呈现为静态 html。 website/pages/en 中的文件也将被复制到 pages 中，并将覆盖 pages 中的任何同名
-
本文向大家介绍ThinkPHP打开验证码页面显示乱码的解决方法，包括了ThinkPHP打开验证码页面显示乱码的解决方法的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了ThinkPHP打开验证码页面显示乱码的解决方法。分享给大家供大家参考。具体分析如下： 在用thinkphp开发的时候,有时会出现验证码乱码的问题,解决方法是把如下这个文件放在根目录,访问后就可以解决了,具体的PHP代码如下:
-
本文向大家介绍Python selenium页面加载慢超时的解决方案，包括了Python selenium页面加载慢超时的解决方案的使用技巧和注意事项，需要的朋友参考一下 开发环境： win10-64 python2.7.16 chrome77 先看这样一段代码 当执行了get以后，除非网站全部加载完成，否则你只能乖乖等，什么都不能干，这是整个程序是阻塞的，get不完就别想进行下面操作 这个等
-
本文向大家介绍不同编码的页面表单数据乱码问题解决方法，包括了不同编码的页面表单数据乱码问题解决方法的使用技巧和注意事项，需要的朋友参考一下 今天遇到一个很神奇的问题，用户告诉我这边网站上的表单提交到查询系统之后得不到返回值，查询结果是0条记录，但是再本地纯html执行的结果却能搜索到值。自己验证了下，果然如此，而且比对两边GET提交的参数，除了有个字段的值不同外，参数个数这些都是相同的，故考虑有可
-
本文向大家介绍JS中页面与页面之间超链接跳转中文乱码问题的解决办法，包括了JS中页面与页面之间超链接跳转中文乱码问题的解决办法的使用技巧和注意事项，需要的朋友参考一下 在原页面一张图片上添加了一个链接，链接中有中文，于是出现下面的情况： 解决办法是在tomcat的server.xml文件的中加入URIEncoding=”utf-8”，如下： 页面跳转相关阅读： JavaScript中通过提示框