用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 点击整页变灰的效果(可做退出效果)。
Jan 09 Javascript
JS日期和时间选择控件升级版(自写)
Aug 02 Javascript
Node.js 去掉种子(torrent)文件里的邪恶信息
Mar 27 Javascript
如何判断Javascript对象是否存在的简单实例
May 18 Javascript
JavaScript基于原型链的继承
Jun 22 Javascript
针对BootStrap中tabs控件的美化和完善(推荐)
Jul 06 Javascript
基于jQuery的AJAX和JSON实现纯html数据模板
Aug 09 Javascript
搭建Bootstrap离线文档的方法
Dec 02 Javascript
jQuery使用DataTable实现删除数据后重新加载功能
Feb 27 Javascript
js canvas画布实现高斯模糊效果
Nov 27 Javascript
如何优雅地在vue中添加权限控制示例详解
Mar 07 Javascript
在vue中阻止浏览器后退的实例
Nov 06 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+jQuery实现自动补全功能源码
2013/05/15 PHP
php 删除目录下N分钟前创建的所有文件的实现代码
2013/08/10 PHP
值得分享的php+ajax实时聊天室
2016/07/20 PHP
Yii使用DbTarget实现日志功能的示例代码
2020/07/21 PHP
多个js与css文件的合并方法详细说明
2012/12/26 Javascript
js触发asp.net的Button的Onclick事件应用
2013/02/02 Javascript
JavaScript调试工具汇总
2014/12/23 Javascript
jQuery中:password选择器用法实例
2015/01/03 Javascript
JS实现点击按钮自动增加一个单元格的方法
2015/03/09 Javascript
javascript相关事件的几个概念
2015/05/21 Javascript
AngularJS学习笔记之基本指令(init、repeat)
2015/06/16 Javascript
javascript中使用new与不使用实例化对象的区别
2015/06/22 Javascript
js+html5实现可在手机上玩的拼图游戏
2015/07/17 Javascript
学习JavaScript设计模式之策略模式
2016/01/12 Javascript
JavaScript算法系列之快速排序(Quicksort)算法实例详解
2016/09/04 Javascript
基于JavaScript中字符串的match与replace方法(详解)
2017/12/04 Javascript
Vue列表如何实现滚动到指定位置样式改变效果
2020/05/09 Javascript
vue项目接口域名动态获取操作
2020/08/13 Javascript
[01:18]DOTA2超级联赛专访hanci ForLove淘汰感言曝光
2013/06/04 DOTA
用smtplib和email封装python发送邮件模块类分享
2014/02/17 Python
浅析Python中的多条件排序实现
2016/06/07 Python
python实现字符串连接的三种方法及其效率、适用场景详解
2017/01/13 Python
python 计算两个日期相差多少个月实例代码
2017/05/24 Python
python2.7实现爬虫网页数据
2018/05/25 Python
Python使用Selenium模块实现模拟浏览器抓取淘宝商品美食信息功能示例
2018/07/18 Python
使用CodeMirror实现Python3在线编辑器的示例代码
2019/01/14 Python
Django框架会话技术实例分析【Cookie与Session】
2019/05/24 Python
Django-Model数据库操作(增删改查、连表结构)详解
2019/07/17 Python
手把手教你进行Python虚拟环境配置教程
2020/02/03 Python
如何基于Python和Flask编写Prometheus监控
2020/11/25 Python
一套Java笔试题
2016/08/20 面试题
同步和异步有何异同,在什么情况下分别使用他们
2013/04/09 面试题
学校安全检查制度
2014/01/27 职场文书
上课迟到检讨书
2014/02/19 职场文书
士兵突击观后感
2015/06/16 职场文书
如何用JavaScript实现一个数组惰性求值库
2021/05/05 Javascript