解决使用load添加其他页面的时候导致一瞬间样式错乱

最新推荐文章于 2022-11-23 14:08:27 发布

qq挖掘机

最新推荐文章于 2022-11-23 14:08:27 发布

阅读量494

点赞数

文章标签： js html

本文链接：https://blog.csdn.net/xuebinsunwumei/article/details/112169890

版权

这是我在近期写项目的时候遇到的一个问题，我是这样解决的
首先html代码：在代码中设置body默认样式为隐藏

<body style="display: none;">
</body>

然后js代码：在代码中设置load的回调函数让body再显示出来

$(".har_title").load("/xinyuncan/footer.html",function(){
    $("body").show();
    $(".fir_content").removeClass("select_color");
    $(".fir_content").eq(2).addClass("select_color");
});

注意公共头部或尾部的load代码尽量不要放在$(function(){})里面来写否则依然会出现样式错乱。
那么问题又来了，移动端这样做真机调试的时候头部或尾部样式依然会错乱，解决办法是在那个要加载的html文件中预先link头部或尾部样式。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

qq挖掘机

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

小白IT:如何快速写出一个前端页面（网页），Python中如何使用前端语言什么是？JavaScript？BOM&DOM？Bootstrap？？

yidianyidei的博客

05-19

4035

JavaScript前端语言 1.什么是JavaScript语言 JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。用来给HTML页面增加动态功能 2.ECMAScript和JavaScript的关系 1996年11月，JavaScript的创造者–Netscape公司，将JavaScript提交给国际标准化组织ECMA。次年，ECMA发布262号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的标准，并将这种语言称为ECMAScript，这个版本就是

h5支付不能打开支付宝 ios_iOS 解决微信h5支付，支付宝h5支付无法直接返回APP的问题...

weixin_39955355的博客

12-18

1476

由于公司的业务需要，为了节省申请开通微信支付的时间和人力，公司决定使用微信h5支付。这样即节省了时间，同时以后所有的APP都能使用h5支付，既方便又快捷。但是真正做的时候问题来了，当你支付成功之后或者是取消支付的时候会跳转到Safari浏览器，这就很尴尬了，完全无用户体验啊。当时看着Android可以直接返回到APP，心里瞬间不爽了。开始埋怨苹果公司了，但是由于公司的业务必须要做h5，没办法开始找...

参与评论您还未登录，请先登录后发表或查看评论

用Jquery.load载入页面后样式没了页面混乱的解决方法

10-25

一直想用jquery.load的方法载入新的页面，以实现局部刷新，结果发现样式没了，后来发现了解决方法，如果不过滤掉一些内容的话，直接加载，会使页面混乱的

使用load()加载页面导致样式出错

一个人的青春战役的博客

08-08

1155

**描述：**开发后台管理页面经常需要在一个模板内切换不同的页面内容，所以在模板页面内采用load()来加载不同的页面。一般会先写好各个独立的页面然后通过点击按钮，使用load()加载。 **问题：**加载页面后发现页面样式出错。 **原因：**记载的页面和模板页面引入了相同的js文件。（如bootsrap,jquery等等） **解决：**独立页面开发完成后，注释掉引入的相关文件。所有页面需要的...

局部载入html后主页面变了,用Jquery.load载入页面后样式没了页面混乱的解决方法...

weixin_39964819的博客

05-30

362

因为开始不懂Jquery，一直想用jquery.load的方法载入新的页面，以实现局部刷新，结果发现载入进来的页面与原来单独的页面不一样，样式没了，后来在网上查了一下，发现了解决办法，这是别人的回答：是这样的，如果不过滤掉一些内容的话，直接加载，会使页面混乱的，比如新的页面也存在标签，加载进来后，一个页面就会存在两个标签是不规范的的HTML。这个是在jquery.load()函数中规定的。一般加载...

html load页面变形,jQuery实战教程用jQuery.load载入页面后样式没了页面混乱的解决方法...

weixin_32394375的博客

06-09

424

用jquery.load的方法载入新的页面，以实现局部刷新，结果发现载入进来的页面与原来单独的页面不一样，样式没了。如果不过滤掉一些内容的话，直接加载，会使页面混乱的，比如新的页面也存在标签，加载进来后，一个页面就会存在两个标签是不规范的的HTML。这个是在jquery.load()函数中规定的。一般加载进来的页面需要自己根据加载的内容的元素重新定义CSS样式和添加js事件的。比如：原页面A.ht...

jquery用load引入页面

12-13

312

在做页面设计的时候,有时需要在一个页面上引入另一个页面,用jquery比较简单,三两句代码就能实现,看代码:index.html <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> &lt...

iOS最新面试题（一）

qq_34500366的博客

11-19

1568

1.聊下HTTP post的body体使用form-urlencoded和multipart/form-data的区别。 1）application/x-www-form-urlencoded：窗体数据被编码为名称/值对，这是标准且默认的编码格式。当action为get时候，客户端把form数据转换成一个字串append到url后面，用?分割。当action为post时候，浏览器把form数据封装到http body中，然后发送到server。 2）multipart/form-data： multipa

测试面试点

qq_38338941的博客

09-04

4392

测试面试题三、问答题 1、在您以往的工作中，一条BUG记录都包含了哪些内容？如何提交高质量的bug记录？答：a)包含内容：bug编号，bug标题，bug模块、具体描述，bug等级，重现步骤，bug出现的版本号、测试环境，指派给的人，修复等级，bug状态、开发接口人员及版本号，相关附件等每条bug里只包括一个bug、不可重现的bug也要报告、描述要简明准确、根据bug问题的...

java面试题

阿江江的博客

03-20

4693

第一章 Java语言 1.Java基础 1.1 为什么Java代码可以实现一次编写、到处运行？因为有JVM，这是是Java跨平台的关键。在程序运行前，Java源代码（.java）需要经过编译器编译成字节码（.class）。在程序运行时，JVM将字节码翻译成特定平台下的机器码并运行，也就是说，只要在不同的平台上安装对应的JVM，就可以运行字节码文件。注意事项编译的结果是生成字节码，字节码不能直接运行，必须通过JVM翻译成机器码才能运行；跨平台的是Java程序、而不是JVM，JVM是C/C++开发

关于jquery mobile.js 框架引入过程中，框架自身css 样式影响页面样式解决方法

geeker_yuyu的博客

11-11

650

关于jquery mobile.js 框架引入过程中，框架自身css 样式影响页面样式解决方法如下：紧接着,写入一行代码，搞定： $.mobile.autoInitializePage = false 问题解决！

php分页中为什么点击跳转后页面就乱了,利用load后的数据库分页跳转的问题 php...

weixin_35369702的博客

03-11

162

我用jquery的load属性插入一个数据库分页网页，然后一点击任何一个跳转页面的链接时，就还回原来div中的内容！！！如果要在load中传递参数，该怎么加参数？？？这是分页代码：// Page分页函数$page = $_GET["page"];function Page($rows,$page_size){global $page,$select_from,$select_limit,$page...

Jquery load加载页面时样式丢失

08-13

2717

jquery使用load异步加载时在微信中的页面的样式丢失了，其他浏览器都没问题，微信X5浏览器真是强大！一番折腾后两种方案可以解决问题第一种，不在load页面中放入外链，将外链文件放入主页面，页面第一次加载的时候把资源加载完可以避免这种问题，但是，CSS冲突并不好解决第二种，将外链CSS全部写入页面中，每次加载时清空HTML，这样的话每次页面都是新的，各有利弊。

vue项目中设置全局loading时遇到多个请求时loading加载显示问题

weixin_42484910的博客

11-23

2531

多个请求如果有一个请求成功则加载动画就会结束问题（等所有请求都完成才能结束）- 计数记录需要加载动画的请求（isLoading不是false的）的接口数量当关闭时查看请求（isLoading不是false的）的数量是否完全都走过确定则关闭。项目设置全局loading动画加载，如果页面一次加载了多个请求，当其中有一个接口请求成功后 loading加载动画会消失，但是其实此时还有一个接口还未请求成功那么其实加载动画不应该消失的。

关于jQuery load()方法加载页面后台发生异常而前台页面加载失败且没有任何展示信息的问题处理...

weixin_33725239的博客

08-08

467

jQuery中load()方法还是比较方便的，可以对div等容器动态加载页面或其它html元素，通常情况我们是这样使用的： $("#div").load(url);这种方式是没有进行任何异常处理的，如果后端没有任何异常，前端页面是可以正常加载的，但后端发生异常时，前端需要加载的元素就会出现个空白，且没有任何提示信息，这样的界面很不友好的，下面看一下load方法的参数定义和用法 lo...

jQuery的load()函数使用完以后页面空白