div重叠和隐藏显示

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

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

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

<div style:"position:relative;">
<div style:"width:450px;height:400px;position:absolute;left:0;top:0"></div>
<div style:"width: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，就会露出来，就算隐藏了，如果大小不同，切换时。不太美观。

在这里补充一下，用Jquery显示下拉框选择，然后DIV里显示隐藏

<input class="button" type="button" id="Sjbb_ZPSDTJ_CX" οnclick="Sjbb_ZPSDTJ_select()"  value="查  询"/>

<div 
		style="width:100%;height:310px;position: relative;">
		<!-- 数据图 -->
		<div id="container_DX"
			style="width:100%;height:310px;position:absolute;left:0;top:0;" ></div>

		<div id="container_WL"
			style="width:100%;height:310px;position:absolute;left:0;top:0;"></div>
	</div>

JQ部分

//查询
function Sjbb_ZPSDTJ_select(){
	debugger
	var spsdValue = $("#Sjbb_ZPSDTJ_zpsd").combobox("getValue");
	var container_DX = $("#container_DX");
	var container_WL = $("#container_WL");
	if(spsdValue == "A值"){
		container_DX.hide();
		container_WL.toggle();
	}else{
		container_WL.hide();
		container_DX.hide();
		container_DX.toggle();
	}
	
}

当点击下拉菜单时，选择了A值后，再单击查询按钮，就会触发查询函数。判断并用hide()隐藏和toggle()显示.为什么我后面要的 container_DX.hide();
container_DX.toggle();。因为要有隐藏，才会有取消隐藏方法，要不然，你第一次选择是不会显示的，后面都会显示，我这文字描述有些抽象，大家可以自己动手试试看。在两个DIV中放张图片试试效果。