WebUploader在display:none 无法运行

最新推荐文章于 2019-10-15 09:09:32 发布

weixin_30673611

最新推荐文章于 2019-10-15 09:09:32 发布

阅读量190

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/miny-simp/p/7072515.html

本文介绍了解决WebUploader.js多文件上传插件在div被隐藏时无法正常工作的问题。通过调整CSS样式，在页面加载时短暂显示包含WebUploader的div，确保插件正常运行。此外，还详细探讨了CSS中不同隐藏方法的特点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

webuploader.js 多文件上传插件

当为其所在div设置display:none 时，WebUploader的按钮打不开，无法运行

解决办法：浏览器加载的时候，设置WebUploader所在的div显示，然后再为起设置隐藏属性

.tab-content > .tab-pane {
    display: block; position: absolute; opacity: 0; filter:Alpha(opacity=0);
}
.tab-content > .active {
    position: relative; opacity: 1; filter:Alpha(opacity=1);
}


延伸：
CSS元素隐藏 
    在CSS中，让元素隐藏（指屏幕范围内肉眼不可见）的方法很多，有的占据空间，有的不占据空间；有的可以响应点击，有的不能响应点击。
{ display: none; /* 不占据空间，无法点击 */ } 
/********************************************************************************/ 
{ visibility: hidden; /* 占据空间，无法点击 */ } 
/********************************************************************************/ 
{ position: absolute; top: -999em; /* 不占据空间，无法点击 */ } 
/********************************************************************************/ 
{ position: relative; top: -999em; /* 占据空间，无法点击 */ } 
/********************************************************************************/ 
{ position: absolute; visibility: hidden; /* 不占据空间，无法点击 */ } 
/********************************************************************************/ 
{ height: 0; overflow: hidden; /* 不占据空间，无法点击 */ } 
/********************************************************************************/ 
{ opacity: 0; filter:Alpha(opacity=0); /* 占据空间，可以点击 */ } 
/********************************************************************************/ 
{ position: absolute; opacity: 0; filter:Alpha(opacity=0); /* 不占据空间，可以点击 */ } 
/********************************************************************************/ 
{ 
zoom: 0.001; 
-moz-transform: scale(0); 
-webkit-transform: scale(0); 
-o-transform: scale(0); 
transform: scale(0); 
/* IE6/IE7/IE9不占据空间，IE8/FireFox/Chrome/Opera占据空间。都无法点击 */ 
} 
/********************************************************************************/ 
{ 
position: absolute; 
zoom: 0.001; 
-moz-transform: scale(0); 
-webkit-transform: scale(0); 
-o-transform: scale(0); 
transform: scale(0); 
/* 不占据空间，无法点击 */ 
}