用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与图片美化checkbox和radio控件的代码(打包下载)
Nov 11 Javascript
解释&amp;&amp;和||在javascript中的另类用法
Jul 28 Javascript
jQuery学习笔记之创建DOM元素
Jan 19 Javascript
node.js集成百度UE编辑器
Feb 05 Javascript
使用React实现轮播效果组件示例代码
Sep 05 Javascript
学习vue.js条件渲染
Dec 03 Javascript
bootstrap datetimepicker日期插件超详细使用方法介绍
Feb 23 Javascript
angularjs中使用ng-bind-html和ng-include的实例
Apr 28 Javascript
浅谈Angular2 ng-content 指令在组件中嵌入内容
Aug 18 Javascript
微信小程序中post方法与get方法的封装
Sep 26 Javascript
JS实现普通轮播图特效
Jan 01 Javascript
解决vue-cli输入命令vue ui没效果的问题
Nov 17 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程序效率优化的一些策略小结
2010/07/17 PHP
php 字符串压缩方法比较示例
2014/01/23 PHP
php计算2个日期的差值函数分享
2015/02/02 PHP
浅谈php数组array_change_key_case() 函数和array_chunk()函数
2016/10/22 PHP
PHP+Ajax异步带进度条上传文件实例
2016/11/01 PHP
解javascript 混淆加密收藏
2009/01/16 Javascript
JavaScript通过正则表达式实现表单验证电话号码
2014/03/07 Javascript
jquery.ajax之beforeSend方法使用介绍
2014/12/08 Javascript
javascript日期计算实例分析
2015/06/29 Javascript
CSS javascript 结合实现悬浮固定菜单效果
2015/08/23 Javascript
jQuery Mobile 触摸事件实例
2016/06/04 Javascript
JS给swf传参数的实现方法
2016/09/13 Javascript
值得收藏的vuejs安装教程
2017/11/21 Javascript
详解vue+vuex+koa2开发环境搭建及示例开发
2018/01/22 Javascript
在 Typescript 中使用可被复用的 Vue Mixin功能
2018/04/17 Javascript
JavaScript使用prototype原型实现的封装继承多态示例
2018/08/31 Javascript
js实现删除li标签一行内容
2019/04/16 Javascript
vue如何截取字符串
2019/05/06 Javascript
微信小程序云开发之使用云数据库
2019/05/17 Javascript
微信小程序代码上传、审核发布小程序
2019/05/18 Javascript
对Layer UI 模块化的用法详解
2019/09/26 Javascript
JavaScript实现移动端拖动元素
2020/11/24 Javascript
Vue如何跨组件传递Slot的实现
2020/12/14 Vue.js
python单链表实现代码实例
2013/11/21 Python
python实现socket客户端和服务端简单示例
2014/02/24 Python
Python作用域用法实例详解
2016/03/15 Python
Python之web模板应用
2017/12/26 Python
解决python3.5 正常安装 却不能直接使用Tkinter包的问题
2019/02/22 Python
Python selenium键盘鼠标事件实现过程详解
2020/07/28 Python
美国环保婴儿用品公司:The Honest Company
2017/11/23 全球购物
美国在线旅行社:Crystal Travel
2018/09/11 全球购物
如何提高SQL Server的安全性
2016/07/25 面试题
妈妈活动方案
2014/08/15 职场文书
学生夜不归宿检讨书
2014/09/23 职场文书
重温入党誓词主持词
2015/06/29 职场文书
Win11怎么跳过联网验机 ?Win11跳过联网验机激活教程
2022/04/05 数码科技