用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解密入门 最终变量劫持
Jun 25 Javascript
Microsoft Ajax Minifier 压缩javascript的方法
Mar 05 Javascript
JavaScript中yield实用简洁实现方式
Jun 12 Javascript
一个轻量级的javascript库 pj介绍
Dec 19 Javascript
js 中{},[]中括号,大括号使用详解
May 12 Javascript
node.js中的querystring.escape方法使用说明
Dec 10 Javascript
jquery判断密码强度的验证代码
Apr 22 Javascript
JS点击某个图标或按钮弹出文件选择框的实现代码
Sep 27 Javascript
canvas 弹幕效果(实例分享)
Jan 11 Javascript
BootStrap实现文件上传并带有进度条效果
Sep 11 Javascript
利用angular、react和vue实现相同的面试题组件
Feb 19 Javascript
vuejs前后端数据交互之从后端请求数据的实例
Aug 11 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
一个简易需要注册的留言版程序
2006/10/09 PHP
PHP屏蔽蜘蛛访问代码及常用搜索引擎的HTTP_USER_AGENT
2013/03/06 PHP
php中将数组转成字符串并保存到数据库中的函数代码
2013/09/29 PHP
php判断文件上传类型及过滤不安全数据的方法
2014/12/17 PHP
Yii2 rbac权限控制之菜单menu实例教程
2016/04/28 PHP
jQuery中add实现同时选择两个id对象
2010/10/22 Javascript
JQuery 1.3.2以上版本中出现pareseerror错误的解决方法
2011/01/11 Javascript
用js判断页面是否加载完成实现代码
2012/12/11 Javascript
JQuery获取样式中的background-color颜色值的问题
2013/08/20 Javascript
JavaScript中的原型链prototype介绍
2014/12/30 Javascript
js获取页面及个元素高度、宽度的代码
2016/04/26 Javascript
基于vue实现分页/翻页组件paginator示例
2017/03/09 Javascript
Validform验证时可以为空否则按照指定格式验证
2017/10/20 Javascript
vue中选项卡点击切换且能滑动切换功能的实现代码
2018/11/25 Javascript
Next.js项目实战踩坑指南(笔记)
2018/11/29 Javascript
vue 列表页跳转详情页获取id以及详情页通过id获取数据
2019/03/27 Javascript
vue实现百度搜索功能
2020/12/28 Javascript
微信小程序实现可拖动悬浮图标(包括按钮角标的实现)
2020/12/29 Javascript
nestjs返回给前端数据格式的封装实现
2021/02/22 Javascript
Python制作简单的网页爬虫
2015/11/22 Python
Python判断值是否在list或set中的性能对比分析
2016/04/16 Python
Python排序搜索基本算法之希尔排序实例分析
2017/12/09 Python
对numpy中轴与维度的理解
2018/04/18 Python
利用django-suit模板添加自定义的菜单、页面及设置访问权限
2018/07/13 Python
Python完成毫秒级抢淘宝大单功能
2019/06/06 Python
Python模拟登录之滑块验证码的破解(实例代码)
2019/11/18 Python
使用TensorFlow-Slim进行图像分类的实现
2019/12/31 Python
解决Pytorch 加载训练好的模型 遇到的error问题
2020/01/10 Python
Python3.7下安装pyqt5的方法步骤(图文)
2020/05/12 Python
python实现凯撒密码、凯撒加解密算法
2020/06/11 Python
中科方德软件测试面试题
2016/04/21 面试题
个人教师自我评价范文
2013/12/02 职场文书
大二自我鉴定
2014/01/31 职场文书
小组合作学习反思
2014/02/18 职场文书
小学生环保倡议书
2014/05/15 职场文书
入党转正申请书范文
2019/05/20 职场文书