用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 相关文章推荐
JavaScript 对象模型 执行模型
Dec 06 Javascript
jQuery+css实现百度百科的页面导航效果
Dec 16 Javascript
EasyUI中combobox默认值注意事项
Mar 01 Javascript
7个有用的jQuery代码片段分享
May 19 Javascript
javascript跨域的方法汇总
Oct 23 Javascript
Bootstrap按钮功能之查询按钮和重置按钮
Oct 26 Javascript
详解VUE 数组更新
Dec 16 Javascript
vue2.0 elementUI制作面包屑导航栏
Feb 22 Javascript
JavaScript实现邮箱后缀提示功能的示例代码
Dec 13 Javascript
vue在路由中验证token是否存在的简单实现
Nov 11 Javascript
vue.js实现简单购物车功能
May 30 Javascript
element tree树形组件回显数据问题解决
Aug 14 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读MYSQL中文乱码的解决方法
2006/12/17 PHP
什么情况下可以不写PHP的闭合标签“?&gt;”
2014/08/28 PHP
Smarty中常用变量操作符汇总
2014/10/27 PHP
php基于Snoopy解析网页html的方法
2015/07/09 PHP
详解EventDispatcher事件分发组件
2016/12/25 PHP
PHP中的日期时间处理利器实例(Carbon)
2017/06/09 PHP
js实现不提交表单获取单选按钮值的方法
2015/08/21 Javascript
Node.js connect ECONNREFUSED错误解决办法
2016/09/15 Javascript
Vue.js 2.0学习教程之从基础到组件详解
2017/04/24 Javascript
jQuery封装animate.css的实例
2018/01/04 jQuery
在angular 6中使用 less 的实例代码
2018/05/13 Javascript
vue-router+nginx 非根路径配置方法
2018/06/30 Javascript
Node.js中package.json中库的版本号(~和^)
2019/04/02 Javascript
js的继承方法小结(prototype、call、apply)(推荐)
2019/04/17 Javascript
js+html5 canvas实现ps钢笔抠图
2019/04/28 Javascript
react-native滑动吸顶效果的实现过程
2019/06/03 Javascript
node.js处理前端提交的GET请求
2019/08/30 Javascript
使用Python编写vim插件的简单示例
2015/04/17 Python
python扫描proxy并获取可用代理ip的实例
2017/08/07 Python
根据DataFrame某一列的值来选择具体的某一行方法
2018/07/03 Python
对python中的控制条件、循环和跳出详解
2019/06/24 Python
Python完成哈夫曼树编码过程及原理详解
2019/07/29 Python
用Python实现二叉树、二叉树非递归遍历及绘制的例子
2019/08/09 Python
python英语单词测试小程序代码实例
2019/09/09 Python
德国在线订购鲜花:Fleurop
2018/08/25 全球购物
英国领先的鞋类零售商和顶级品牌的官方零售商:Wynsors
2020/02/17 全球购物
小学生班会演讲稿
2014/01/09 职场文书
生产厂长岗位职责
2014/02/21 职场文书
科长竞争上岗演讲稿
2014/05/12 职场文书
学习群众路线的心得体会
2014/11/05 职场文书
2015学校年度工作总结
2015/05/11 职场文书
公文写作:新员工转正申请书范本3篇!
2019/08/07 职场文书
Python 实现定积分与二重定积分的操作
2021/05/26 Python
Vue提供的三种调试方式你知道吗
2022/01/18 Vue.js
Netflix《海贼王》真人版剧集多张片场照曝光
2022/04/04 日漫
Vue ECharts实现机舱座位选择展示功能
2022/05/15 Vue.js