关于jQuery易用户界面刷新标签后页面变形的解决方案

在编写jQuery EasyUI Tab示例时，如果刷新前一个Tab，一个Tab中的页面布局会比较混乱。如下图所示：

首次打开时，页面布局是正确的：

此时，在第二个选项卡中，单击第一页上的刷新按钮，一直刷新，然后切换回再次查看该页，如下图所示：

但是主页选项卡的页面是正常的。

为了便于解释，第一个标签代表“主页”，第二个标签代表“子菜单10”

产生这个问题的根本原因是，当你点击第二个选项卡中其他第一个选项卡的刷新按钮时，第二个选项页面的内容实际上被刷新了。当您离开第一个选项卡的刷新按钮时，此时第一个选项卡被选中，而第二个选项卡尚未呈现，这导致了这种情况。身份验证过程，这是身份验证选项卡的标题。

打开两个标签，一个“主页”一个“子菜单10”，切换到“子菜单10”标签，然后点击“主页”标签的刷新按钮。弹出下图。可以看到，在鼠标点击的过程中，选项卡中选择的是“子菜单10”选项卡，而不是我们看到的“主页”选项卡。

出现上述问题的错误代码如下：

/* title表示tab *的标题/function refeshcrunttab(){ var tab panel=$(' # tab container ')；//用于存储制表符的容器tab var tab=tab panel . tab(' get selected ')；//alert(title : ' tab . panel(' options ')。在“标签”选项卡上选择的按钮的标题)；var url=$(tab.panel('options ')。内容)。attr(' src ')；tab panel . tab(' update '，{tab: tab，选项： { content 3360 create Frame(URL)//create Frame tag })；};函数create frame(URL){ return ' iframe src=' http : ' URL ' ' frame border=' 0 ' style=' height :100%；宽度：100%；/iframe '；};要找出问题的根源，在上面的方法中，刷新时只需要传入刷新按钮的标签标题，选中这个，然后刷新即可。修改后的代码如下：

/* title表示tab *的标题/function refeshcrunttab(title){ var tab panel=$(' # tab container ')；var tab=Tabpanel . tab(' GetSelected ')；//alert('传入参数title:' title '，title:' tab.panel ('options ')。选项卡按钮的标题)；var refeshTab=tab panel . tab(' GetTab '，title)；if (tab！=refeshTab){ tabbpanel . tab(' select '，title)；tab=refeshTab} var url=$(tab.panel('options ')。内容)。attr(' src ')；tab panel . tab(' update '，{ tab: tab，options : { content : create frame(URL)} })；};函数create frame(URL){ return ' iframe src=' http : ' URL ' ' frame border=' 0 ' style=' height :100%；宽度：100%；/iframe '；};以上就是边肖介绍的jQuery EasyUI中刷新Tab后页面变形的解决方案。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！