用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 相关文章推荐
jquery 操作iframe的几种方法总结
Dec 13 Javascript
node.js中使用socket.io的方法
Dec 15 Javascript
javascript每日必学之多态
Feb 23 Javascript
JavaScript必知必会(九)function 说起 闭包问题
Jun 08 Javascript
jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码
Aug 23 jQuery
详解用webpack的CommonsChunkPlugin提取公共代码的3种方式
Nov 09 Javascript
vue中使用sessionStorage记住密码功能
Jul 24 Javascript
灵活使用console让js调试更简单的方法步骤
Apr 23 Javascript
关于vue2强制刷新,解决页面不会重新渲染的问题
Oct 29 Javascript
vue 解决移动端弹出键盘导致页面fixed布局错乱的问题
Nov 06 Javascript
微信小程序自定义胶囊样式
Dec 27 Javascript
JS+JQuery实现无缝连接轮播图
Dec 30 jQuery
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
全国中波电台频率表
2020/03/11 无线电
将文件夹压缩成zip文件的php代码
2009/12/14 PHP
老版本PHP转义Json里的特殊字符的函数
2015/06/08 PHP
php-app开发接口加密详解
2018/04/18 PHP
PHP连接sftp并下载文件的方法教程
2018/08/26 PHP
使用git迁移Laravel项目至新开发环境的步骤详解
2020/04/06 PHP
javascript下阻止表单重复提交、防刷新、防后退
2007/08/17 Javascript
javascript 限制输入和粘贴(IE,firefox测试通过)
2008/11/14 Javascript
jquery uaMatch源代码
2011/02/14 Javascript
jQuery函数的等价原生函数代码示例
2013/05/27 Javascript
js判断客户端是iOS还是Android等移动终端的方法
2013/12/11 Javascript
Jqgrid表格随窗口大小改变而改变的简单实例
2013/12/28 Javascript
程序员必知35个jQuery 代码片段
2015/11/05 Javascript
Javascript中apply、call、bind的巧妙使用
2016/08/18 Javascript
JavaScript实现窗口抖动效果
2016/10/19 Javascript
Vue中的数据监听和数据交互案例解析
2017/07/12 Javascript
JavaScript实现购物车基本功能
2017/07/21 Javascript
浅谈在vue中使用mint-ui swipe遇到的问题
2018/09/27 Javascript
[08:07]DOTA2每周TOP10 精彩击杀集锦vol.8
2014/06/25 DOTA
Python学习资料
2007/02/08 Python
Python3中正则模块re.compile、re.match及re.search函数用法详解
2018/06/11 Python
python实现画五角星和螺旋线的示例
2019/01/20 Python
pandas实现to_sql将DataFrame保存到数据库中
2019/07/03 Python
django实现类似触发器的功能
2019/11/15 Python
win10系统Anaconda和Pycharm的Tensorflow2.0之CPU和GPU版本安装教程
2019/12/03 Python
Python基于codecs模块实现文件读写案例解析
2020/05/11 Python
墨西哥皇宫度假村预订:Palace Resorts
2018/06/16 全球购物
波兰珠宝品牌:YES
2019/08/09 全球购物
材料物理专业大学毕业生求职信
2013/10/15 职场文书
大学生自我鉴定范文
2013/12/28 职场文书
《鞋匠的儿子》教学反思
2014/03/02 职场文书
财务科科长岗位职责
2014/03/10 职场文书
不错的求职信范文
2014/07/20 职场文书
干部作风建设工作总结
2014/10/29 职场文书
2015高考寄语集锦
2015/02/27 职场文书
2019大学竞选班长发言稿
2019/06/27 职场文书