在jquery选项卡中加载不同的页面很慢，有时甚至会崩溃。

Question

我的老板希望不同的过程(最初是单独的页面)出现在选项卡上。

无论如何，我使用jquery选项卡

http://jqueryui.com/tabs/

我的代码

jquery

    <script type="text/javascript">
$(document).ready(function()
{ 
$("#tabs-1").load("transaction.php");
$("#tabs-2").load("book.php");
$("#tabs-3").load("schedule.php");
});
</script>

html

<ul>
<li><a href="#tabs-1">Transaction</a></li>
<li><a href="#tabs-2">Book</a></li>
<li><a href="#tabs-3">Schedule</a></li>
</ul>
<div id="tabs-1">
</div>
<div id="tabs-2">
</div>
<div id="tabs-3">

每个页面都会提取mysql数据库中的数据。问题是，book.php有大量的数据，所以加载速度很慢，有时浏览器会崩溃。

这种实现是可能的还是我应该解释一下，不建议使用选项卡，应该使用单独的页面来显示？

Answer 1

您可以做的是让book.php只在单击选项卡2时加载。

$("#tabs-2").click(function(){
    $("#tabs-2").load("book.php");
});

这应该有助于阻止它立即崩溃。如果没有帮助，您将需要优化您的查询。

您也可以尝试使用ajax。

将其放入文档加载中，希望它能够将book.php的内容加载到选项卡中。

  $.get( "book.php", function(book) {
    $("#tabs-2").html(book);
  });

Jquery样本

$.ajax({
   type: "POST",
   url: "page_url",
   data: $("#advserc").serialize() + "&pagenum=" + page, // i sent the page through with it
  beforeSend:function(){  // this unhides a div with gif loading image in it.
        //show gif here, eg:
        $("#loading").show();

    },
    complete:function(){
        //hide gif here, eg:
        $("#loading").hide(); // this hides the div
    },
   success: function(data){
      $("#content-container").html(data); // here i fill the div with the dat from the php page
   }
});