HTML5页面加载问题（使用jQuery + JS + HTML5）

Question

我的服务页面有一些加载/显示问题。

我正在使用jQuery UI-用于外部和内部选项卡的选项卡，以及用于显示表记录的“合适”组件。 jQuery tabs和footable组件以jQuery ready方法准备。

     $(document).ready(function(){
          $( "#tabs" ).tabs();
          $( "#tests" ).tabs();        
          $('.footable').footable(); 
           ....
      }

由于某种原因，页面会在UI定位良好之前显示，并且页面的布局效果不佳，这看起来非常不专业。

jQuery选项卡是否存在问题，需要以其他方式对其进行初始化？ 欣赏任何想法...

示例：这是页面在正确放置之前的外观

这是页面定位后的外观

Answer 1

在将jquery选项卡与其他表插件一起使用之前，请先解决此问题。

jQuery UI的选项卡具有一个激活事件，当您单击一个选项卡时将触发该事件。 您将需要在其中调用footable的redraw（）方法。

$('#tests').tabs({
  activate: function( event, ui ) {
      $('.footable').data('footable').redraw();
  }
});

Answer 2

我找到了解决方案，

在保存选项卡的容器DIV中，我放置了一种显示样式：无在jQuery ready函数的末尾（准备好选项卡之后），我使用css display块将其打开。