用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面向对象编程之对象使用分析
Aug 19 Javascript
JavaScript去掉空格的方法集合
Dec 28 Javascript
js 字符串转化成数字的代码
Jun 29 Javascript
Javascript函数式编程简单介绍
Oct 11 Javascript
AngularJS select设置默认值的实现方法
Aug 25 Javascript
jquery自定义显示消息数量
Dec 19 jQuery
使用taro开发微信小程序遇到的坑总结
Apr 08 Javascript
利用原生JavaScript实现造日历轮子实例代码
May 08 Javascript
JavaScript实现图片的放大缩小及拖拽功能示例
May 14 Javascript
vue封装swiper代码实例解析
Oct 08 Javascript
js 实现watch监听数据变化的代码
Oct 13 Javascript
详解如何在vue+element-ui的项目中封装dialog组件
Dec 11 Vue.js
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:风雨欲来 路在何方?
2006/10/09 PHP
php漏洞之跨网站请求伪造与防止伪造方法
2013/08/15 PHP
php自定义的格式化时间示例代码
2013/12/05 PHP
PHP扩展开发入门教程
2015/02/26 PHP
JS 遮照层实现代码
2010/03/31 Javascript
关于跨站脚本攻击问题
2011/12/22 Javascript
写自已的js类库需要的核心代码
2012/07/16 Javascript
鼠标滑在标题上显示图片的JS代码
2013/11/19 Javascript
搭建pomelo 开发环境
2014/06/24 Javascript
浅谈JavaScript中运算符的优先级
2015/07/07 Javascript
async/await与promise(nodejs中的异步操作问题)
2017/03/03 NodeJs
js实现简单的获取验证码按钮效果
2017/03/03 Javascript
jQuery实现返回顶部按钮和scroll滚动功能[带动画效果]
2017/07/05 jQuery
微信小程序代码上传、审核发布小程序
2019/05/18 Javascript
nodejs开发一个最简单的web服务器实例讲解
2020/01/02 NodeJs
详解vue-flickity的fullScreen功能实现
2020/04/07 Javascript
vue基础知识--axios合并请求和slot
2020/06/04 Javascript
简单了解Vue computed属性及watch区别
2020/07/10 Javascript
python网络编程学习笔记(七):HTML和XHTML解析(HTMLParser、BeautifulSoup)
2014/06/09 Python
浅要分析Python程序与C程序的结合使用
2015/04/07 Python
python实现redis三种cas事务操作
2017/12/19 Python
python 字符串追加实例
2019/07/20 Python
flask 使用 flask_apscheduler 做定时循环任务的实现
2019/12/10 Python
python GUI库图形界面开发之PyQt5窗口控件QWidget详细使用方法
2020/02/26 Python
浅析python 定时拆分备份 nginx 日志的方法
2020/04/27 Python
详解python tcp编程
2020/08/24 Python
Python request post上传文件常见要点
2020/11/20 Python
HTML 5 input placeholder 属性如何完美兼任ie
2014/05/12 HTML / CSS
Helly Hansen工作服美国官方网上商店:为最恶劣的环境
2019/09/04 全球购物
用JAVA SOCKET编程,读服务器几个字符,再写入本地显示
2012/11/25 面试题
String是最基本的数据类型吗?
2013/06/13 面试题
行政专员求职信范文
2014/05/03 职场文书
捐书活动总结
2014/05/04 职场文书
奥巴马获胜演讲稿
2014/05/15 职场文书
家长会感言
2015/08/01 职场文书
CocosCreator ScrollView优化系列之分帧加载
2021/04/14 Python