原文链接：http://www.cnblogs.com/riasky/p/3435803.html

       我们在应用Web端的Tab控件时，不管是Jquery easyui的还是Ext的Tab控件都会遇到一个问题，在Tab1正在加载数据的时候我们切换到Tab2，再切换回来，Load数据的控件就会出错，出错的情况有很多种，我做过测试这种情况在Chrome下面没有，IE和Firefox都存在，界面如下：

报错的情况会有很多种，但是究其原因，都是由于在切换Tab1到Tab2的时候，实际上将Tab1的display设置成none了，但是多数控件（比如Hightcharts、Ext、Map控件）在Load数据时如果当前的容器是隐藏状态就会出错。

       解决方案1：切换到Tab2数据加载的时候，出现Working页面，不能够进行其他操作，但这个是垫底的方案，会影响到用户体验，如果此页面加载10秒，这10秒钟内，用户什么都不能做【备用】。

       解决方案2：如果加载出错的情况记录到一个变量中，如果再次切换回此页面，如果发现加载错误，那么重新架加载，这种方案有个弊端是，切换回来时有一段时间的延迟响应，用户会看到出错的页面，再者就是比较难判断出来是否加载出错【不可行】。

       解决方案3：修改Jquery easyui的源码，在切换Tab1到Tab2时，不隐藏Tab1，而是将Tab1的高度置成1，这样有个小问题就是如果Tab太多的情况，很多个1高度的元素会堆积，后来经过测试将Tab1的高度置成0也是可以的，OK，问题解决，代码如下【没有修改jQuery easyui源码，因为压缩后的没法修改，但是也没有找到未压缩的，只是在easyui加载完成后改变Tab的样式】：

$('#divReportTabs').children().last().children().each(function (index)
			{
				var display = $(this).css('display');
				if (tabIndex != index)
				{
					$(this).show().height(0);
				}
			});

此段代码的逻辑就是切换到当前的Tab时，其他的Tab显示但是高度是0px【解决】。

 

转载于:https://www.cnblogs.com/riasky/p/3435803.html