div重叠和隐藏显示

标签：界面   css   div重叠和隐藏显示   div重叠   div隐藏显示   

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

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

因此，我今天讲的就是把多个报表重叠在一起。只显示第一个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>

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

div重叠和隐藏显示

标签：界面   css   div重叠和隐藏显示   div重叠   div隐藏显示   

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