用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 UI 1.72 之datepicker
Dec 29 Javascript
js返回前一页刷新本页重载页面
Jul 29 Javascript
JS实现的用来对比两个用指定分隔符分割的字符串是否相同
Sep 19 Javascript
jQuery ajax全局函数处理session过期后的ajax跳转问题
Jun 03 Javascript
Highcharts学习之数据列
Aug 03 Javascript
基于js实现checkbox批量选中操作
Nov 22 Javascript
手机软键盘弹出时影响布局的解决方法
Dec 15 Javascript
Node连接mysql数据库方法介绍
Feb 07 Javascript
微信小程序 空白页重定向解决办法
Jun 27 Javascript
使用webpack3.0配置webpack-dev-server教程
May 29 Javascript
看看“疫苗查询”小程序有温度的代码
Jul 31 Javascript
PM2自动部署代码步骤流程总结
Dec 10 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 获取select下拉列表框的值
2010/05/08 PHP
PHP结合jQuery实现找回密码
2015/07/22 PHP
PHP之密码加密的几种方式
2015/07/29 PHP
PHP开发APP端微信支付功能
2017/02/17 PHP
php获取'/'传参的值简单方法
2017/07/13 PHP
Javascript实现关联数据(Linked Data)查询及注意细节
2013/02/22 Javascript
分析Node.js connect ECONNREFUSED错误
2013/04/09 Javascript
jQuery判断元素上是否绑定了指定事件的方法
2015/03/17 Javascript
直接拿来用的15个jQuery代码片段
2015/09/23 Javascript
jQuery插件实现无缝滚动特效
2015/11/24 Javascript
JavaScript 数据类型详解
2017/03/13 Javascript
jquery.form.js异步提交表单详解
2017/04/25 jQuery
详解angular笔记路由之angular-router
2017/09/12 Javascript
Vuex提升学习篇
2018/01/11 Javascript
JavaScript常用数学函数用法示例
2018/05/14 Javascript
详解通过源码解析Node.js中cluster模块的主要功能实现
2018/05/16 Javascript
Vue.js组件通信之自定义事件详解
2019/10/19 Javascript
Python下的twisted框架入门指引
2015/04/15 Python
利用selenium 3.7和python3添加cookie模拟登陆的实现
2017/11/20 Python
实践Vim配置python开发环境
2018/07/02 Python
python获取中文字符串长度的方法
2018/11/14 Python
华为校园招聘上机笔试题 扑克牌大小(python)
2020/04/22 Python
python matplotlib如何给图中的点加标签
2019/11/14 Python
意大利奢侈品购物网站:Giglio
2018/01/05 全球购物
有影响力的人、名人和艺术家的官方商品:Represent
2019/11/26 全球购物
Ajax主要包含了哪些技术
2014/06/12 面试题
个人简历自我评价八例
2013/10/31 职场文书
精彩的大学生自我评价
2013/11/17 职场文书
学前教育学生自荐信范文
2013/12/31 职场文书
红旗团支部事迹材料
2014/01/27 职场文书
维修工先进事迹
2014/05/29 职场文书
工程售后服务方案
2014/06/08 职场文书
政府班子四风问题整改措施
2014/10/04 职场文书
毕业论文答辩演讲稿
2015/06/23 职场文书
浅谈Python基础之列表那些事儿
2021/05/11 Python
微信小程序APP的生命周期及页面的生命周期
2022/04/19 Javascript