1

我有一组有效的 jQuery ajax 选项卡。我需要在显示器上放一点动画。我多次尝试为其添加动画。它似乎可以工作，但出现了一个问题 - 它不是唯一的选项卡。当我单击第二个选项卡时，内容不会加载到新选项卡中。但它会继续显示在当前内容下。这是我的代码：

html

<ul id="MainTabs" class="nav nav-tabs">
  <li><a data-target="#tab1" data-toggle="tab" href="inc/timetable_content_detail.php?id=1">Tab 1</a></li>
  <li><a data-target="#tab2" data-toggle="tab" href="inc/timetable_content_detail.php?id=2">Tab 2</a></li>
  <li><a data-target="#tab3" data-toggle="tab" href="inc/timetable_content_detail.php?id=3">Tab 3</a></li>
  <li><a data-target="#tab4" data-toggle="tab" href="inc/timetable_content_detail.php?id=4">Tab 4</a></li>
  <li><a data-target="#tab5" data-toggle="tab" href="inc/timetable_content_detail.php?id=5">Tab 5</a></li>
</ul>

<div class="tab-content" style="background:#ffffff">
  <div class="tab-pane" id="tab1"><?include "inc/timetable_content_detail.php";?></div>
  <div class="tab-pane" id="tab2"><img src="images/loading.gif" />Loading...</div>
  <div class="tab-pane" id="tab3"><img src="images/loading.gif" />Loading...</div>
  <div class="tab-pane" id="tab4"><img src="images/loading.gif" />Loading...</div>
  <div class="tab-pane" id="tab5"><img src="images/loading.gif" />Loading...</div>
</div>

Javascript

$(function() {
  $("#MainTabs").tab();
  $("#MainTabs").bind("show", function(e) {    
    var contentID  = $(e.target).attr("data-target");
    var contentURL = $(e.target).attr("href");
    $(contentID).load(contentURL, function(){
      $("#MainTabs").tab().slideDown("slow");
    });
  });
  $('#MainTabs a:first').tab("show");
});

我试图在 tab() 之后添加 slideDown("slow") 但它似乎不太正确。请你们看看我的代码并提出建议。

问候，

4

0 回答 0