用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 event事件的传递与冒泡处理
Dec 06 Javascript
jQuery 源码分析笔记(2) 变量列表
May 28 Javascript
JavaScript高级程序设计(第3版)学习笔记4 js运算符和操作符
Oct 11 Javascript
非jQuery实现照片散落桌子上,单击放大的LightBox效果
Nov 28 Javascript
第五章之BootStrap 栅格系统
Apr 25 Javascript
JavaScript 中对象的深拷贝
Dec 04 Javascript
jQuery异步提交表单实例
May 30 jQuery
Bootstrap实现的表格合并单元格示例
Feb 06 Javascript
基于vue1和vue2获取dom元素的方法
Mar 17 Javascript
vue实现通讯录功能
Jul 14 Javascript
JS+HTML实现的圆形可点击区域示例【3种方法】
Aug 01 Javascript
Element Collapse 折叠面板的使用方法
Jul 26 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正则表达式基本知识与应用详解【经典教程】
2017/04/17 PHP
thinkPHP框架实现类似java过滤器的简单方法示例
2018/09/05 PHP
laravel框架的安装与路由实例分析
2019/10/11 PHP
PHP超级全局变量【$GLOBALS,$_SERVER,$_REQUEST等】用法实例分析
2019/12/11 PHP
window.addeventjs事件驱动函数集合addEvent等
2008/02/19 Javascript
js parsefloat parseint 转换函数
2010/01/21 Javascript
11款新鲜的jQuery插件[附所有demo下载]
2011/01/24 Javascript
重写javascript中window.confirm的行为
2012/10/21 Javascript
Jquery为a标签的href赋值实现代码
2013/05/03 Javascript
基于jquery实现的可编辑下拉框实现代码
2014/08/02 Javascript
JavaScript和HTML DOM的区别与联系及Javascript和DOM的关系
2015/11/15 Javascript
jQuery+css实现炫目的动态块漂移效果
2016/01/28 Javascript
JavaScript中创建对象的7种模式详解
2017/02/21 Javascript
详解vue模拟加载更多功能(数据追加)
2017/06/23 Javascript
详解vue2 $watch要注意的问题
2017/09/08 Javascript
vue.js提交按钮时进行简单的if判断表达式详解
2018/08/08 Javascript
微信小程序实现搜索历史功能
2020/03/26 Javascript
js 计算月/周的第一天和最后一天代码
2020/02/01 Javascript
vue 项目软键盘回车触发搜索事件
2020/09/09 Javascript
vue组件添加事件@click.native操作
2020/10/30 Javascript
CentOS 8.2服务器上安装最新版Node.js的方法
2020/12/16 Javascript
Python的string模块中的Template类字符串模板用法
2016/06/27 Python
老生常谈Python之装饰器、迭代器和生成器
2017/07/26 Python
Python实现时钟显示效果思路详解
2018/04/11 Python
【python】matplotlib动态显示详解
2019/04/11 Python
Django Rest framework解析器和渲染器详解
2019/07/25 Python
python3 requests库实现多图片爬取教程
2019/12/18 Python
采购部岗位职责
2013/11/24 职场文书
《哪吒闹海》教学反思
2014/02/28 职场文书
家长会主持词
2014/03/26 职场文书
广场舞大赛策划方案
2014/05/31 职场文书
奖学金感谢信
2015/01/21 职场文书
广告公司文案策划岗位职责
2015/04/14 职场文书
学生早退检讨书(范文)
2019/08/19 职场文书
vue 实现上传组件
2021/05/31 Vue.js
MySQL 原理与优化之原数据锁的应用
2022/08/14 MySQL