用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 相关文章推荐
Flash+XML滚动新闻代码 无图片 附源码下载
Nov 22 Javascript
需要做特殊处理的DOM元素属性的访问
Nov 05 Javascript
jquery $.ajax()取xml数据的小问题解决方法
Nov 20 Javascript
jcarousellite.js 基于Jquery的图片无缝滚动插件
Dec 30 Javascript
javascript中返回顶部按钮的实现
May 05 Javascript
BootstrapValidator超详细教程(推荐)
Dec 07 Javascript
快速掌握jquery分页插件jqPaginator的使用方法
Aug 09 jQuery
Angular开发实践之服务端渲染
Mar 29 Javascript
vue form 表单提交后刷新页面的方法
Sep 04 Javascript
element-ui 中使用upload多文件上传只请求一次接口
Jul 19 Javascript
JavaScript装饰者模式原理与用法实例详解
Mar 09 Javascript
通过实例解析chrome如何在mac环境中安装vue-devtools插件
Jul 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
用phpmyadmin更改mysql5.0登录密码
2008/03/25 PHP
用PHP书写安全的脚本代码
2012/02/05 PHP
php实现SAE上使用storage上传与下载文件的方法
2015/06/29 PHP
php类中的$this,static,final,const,self这几个关键字使用方法
2015/12/14 PHP
thinkphp5框架路由原理与用法详解
2020/02/11 PHP
Jquery 基础学习笔记之文档处理
2009/05/29 Javascript
jquery比较简洁的软键盘特效实现方法
2015/03/19 Javascript
浅谈NodeJS中require路径问题
2015/05/07 NodeJs
浅谈JavaScript中的Math.atan()方法的使用
2015/06/14 Javascript
基于jQuery倒计时插件实现团购秒杀效果
2016/05/13 Javascript
DOM操作和jQuery实现选项移动操作的简单实例
2016/06/07 Javascript
jquery实现tab键进行选择后enter键触发click行为
2017/03/29 jQuery
Node.js利用debug模块打印出调试日志的方法
2017/04/25 Javascript
AngularJS中的promise用法分析
2017/05/19 Javascript
ionic 自定义弹框效果
2017/06/27 Javascript
使用travis-ci如何持续部署node.js应用详解
2017/07/30 Javascript
简单实现jquery隔行变色
2017/11/09 jQuery
pace.js和NProgress.js两个加载进度插件的一点小总结
2018/01/31 Javascript
JS canvas绘制五子棋的棋盘
2020/05/28 Javascript
详解在不使用ssr的情况下解决Vue单页面SEO问题
2018/11/08 Javascript
微信小程序的开发范式BeautyWe.js入门详解
2019/07/10 Javascript
[58:12]Ti4第二日主赛事败者组 LGD vs iG 3
2014/07/21 DOTA
[01:00:11]DOTA2-DPC中国联赛 正赛 CDEC vs DLG BO3 第一场 2月7日
2021/03/11 DOTA
Python中的二叉树查找算法模块使用指南
2014/07/04 Python
python进阶教程之文本文件的读取和写入
2014/08/29 Python
Python3调用微信企业号API发送文本消息代码示例
2017/11/10 Python
Python后台开发Django会话控制的实现
2019/04/15 Python
Python分支语句与循环语句应用实例分析
2019/05/07 Python
css3隔行变换色实现示例
2014/02/19 HTML / CSS
PUMA官方商城:世界领先的运动品牌之一
2016/11/16 全球购物
国家地理在线商店:Shop National Geographic
2018/06/30 全球购物
丹麦优惠购物网站:PLUSSHOP
2019/03/24 全球购物
中文专业毕业生自荐书范文
2014/01/04 职场文书
主持词开场白
2014/03/17 职场文书
停电通知范文
2015/04/16 职场文书
回复函格式及范文
2015/07/14 职场文书