首页 > 其他 > 详细

div重叠和隐藏显示

时间:2015-08-01 10:05:45      阅读:256      评论:0      收藏:0      [点我收藏+]

又到周末了。今天又是新的一个月的开始,大家用充满愉快的心情开始这个月的生活吧。

有这么一个需求,就是一个报表模块,这个模块中,有多个报表,一个界面,我们不可能全显示出来,这样一是占位置,二是很乱;三,也就是客户一打开这个模块,看到的是多个报表,不知道焦点放在哪。使用人心情浮躁而不开森。

因此,我今天讲的就是把多个报表重叠在一起。只显示第一个DIV的报表,重叠的都隐藏起来。在查询栏中添加一个报表选项,实现的效果就是当客户一进来时看到的就是第一个报表。想看别的报表时,可以在查询栏中选择相应的报表,点击查询,然后显示出相应的报表。这个我们就可以使用CSS的重叠和隐藏显示了


<div style:"position:relative;">
<div style:"widht:450px;height:400px;position:absolute;left:0;top:0"></div>
<div style:"widht:450px;height:400px;position:absolute;left:0;top:0" display:none;></div>
</div>


实现思路是:在外层的DIV使用相对定位,在里面要重叠的DIV使用的是绝对定位。这样两个DIV绝对定位在一起,就使用重叠,如果你第二个DIV不加dispaly:none;的话,界面中显示的就是后面的DIV的内容,也就是第二个DIV。你给他加个不显示,那只会显示第一个。

由上面的实现思路分析,在查询栏中,也就是给一个判断,如果是要让第2个DIV,就给他显示display:""; 然后让其他的DIV dispaly:none;另外,记得给重叠的DIV的大小要一样,要不然,重叠时而没有隐藏多余的DIV,就会露出来,就算隐藏了,如果大小不同,切换时。不太美观。

版权声明:本文为博主原创文章,未经博主允许不得转载。

div重叠和隐藏显示

原文:http://blog.csdn.net/qq348843576/article/details/47183189

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!