Ajax選項卡淡入淡出效果問題 - jQuery工具

Question

我無法在使用jQuery工具庫時使具有淡入淡出效果的Ajax選項卡工作。它只顯示ajax調用的第一個項目的效果，但沒有其他效果。

您可能會看到測試的網址在www.excellenthost（點）的COM /測試/ test.php的或看到下面的代碼：

JS：

<script type="text/javascript"> 
$(document).ready(function(){ 
     $("ul.features-tabs").tabs(".features-panes > div.features", { 
     effect: 'fade', 
     history: true, 
     onBeforeClick: function(event, i) { 
      loaddetails(this.getTabs().eq(i).attr("id")); 
    function loaddetails(type) { var query = "details=" + type; 
    $.post("shared/details.php", query , function(data) { 
    $(".features").html(data); return false;}); return false; 
    }; }}); 
    }); 
</script> 

HTML：

<div class="hostingFeatures-shadow"></div> 
     <div class="hostingFeatures-bg"> 
     <div class="wrap"> 
      <ul class="features-tabs"> 
      <li><a id="core" href="#core">Core</a></li> 
      <li><a id="email" href="#email">Email</a></li> 

     </ul> 

     <div class="features-panes"> 
      <ul class="packages-bar"> 
       <li class="features-title">&nbsp;</li> 
       <li>1</li> 
       <li>2</li> 
       <li>3</li> 
      </ul> 

      <!-- First Slide --> 
     <div class="features"> 
     </div> 
    </div> 
</div></div> 

AJAX內容： 共享/ details.php

<ul class="features-list"> 
<? if($_POST['details']=='core'){ ?> 
      <li class="features-name">Premium Disk Space</li> 
         <li>1000MB</li> 
         <li>2500MB</li> 
         <li>3500MB</li> 
<? } if($_POST['details']=='email'){ ?> 
         <li class="features-name">Email Accounts</li> 
         <li>35</li> 
         <li>45</li> 
         <li>65</li> 
<? } ?> 
</ul> 

正如您從示例中所看到的，單擊「電子郵件」選項卡時不會加載任何內容。當我執行調試警報（數據）時，Ajax數據顯示正常，所以抓取正確的數據沒有問題。這只是一個問題，讓它張貼在實際的主頁

有人可以請協助嗎？ 布賴恩

Answer 1

如果你真的想 '淡出' 的效果，你可以這樣做：

<ul class="features-tabs"> 
    <li><a href="/hosting/shared/details.php?details=core">Core</a></li> 
    <li><a href="/hosting/shared/details.php?details=email">Email</a></li> 
</ul> 
(...) 
<div class="features"> 
    <!-- Two divs to keep the content panes separated --> 
    <div></div> 
    <div></div> 
</div> 

並使用此Javascript：

$("ul.features-tabs").tabs("div.features > div", { 
    effect: 'fade', 
    onBeforeClick: function(event, i) { 
    var pane = this.getPanes().eq(i); 
    if (pane.is(":empty")) { 
     pane.load(this.getTabs().eq(i).attr("href")); 
    } 
    } 
}); 

這應該工作！

Answer 2

原來jQuery的工具選項卡解決方案不是非常適合這一點，所以我做了一個自定義腳本給你：

DEMO

$("ul.features-tabs").find('a').each(function(i) { 

    $(this).click(function(event){ 
    event.preventDefault(); 
    var clickedPane = $("div.features > div").eq(i); 
    if (clickedPane.is(':visible')) return; 

    $(this).closest('ul').find('a').removeClass('current').end().end().addClass('current'); 

    if (clickedPane.hasClass('contentLoaded') || clickedPane.hasClass('contentLoading')) { 
     clickedPane.siblings().fadeOut(function(){ clickedPane.fadeIn(); }); 
    } else { 
     clickedPane.addClass('contentLoading').load($(this).attr("href"),function(){ 
     $(this).removeClass('contentLoading').addClass('contentLoaded').siblings().fadeOut(function(){ clickedPane.fadeIn(); }); 
     }); 
    } 
    }); 

    // Load & show the initial tabbed pane 
    if (i==0) $(this).click(); 
}); 

它摒棄了jQuery的工具完全它可以完成您需要的所有淡入淡出和Ajax加載。

要使其工作，你需要更改HTML一點：

<div class="hostingFeatures-bg"> 
    <div class="wrap"> 

    <ul class="features-tabs"> 
     <li><a href="/hosting/shared/details.php?details=core">Core</a></li> 
     <li><a href="/hosting/shared/details.php?details=email">Email</a></li> 
    </ul> 

    <div class="features-panes"> 
     <ul class="packages-bar"> 
     <li class="features-title">&nbsp;</li> 
     <li>ER-1</li> 
     <li>ER-2</li> 
     <li>ER-3</li> 
     </ul> 
     <div class="features"> 
     <div></div> 
     <div></div> 
     </div> 
    </div> 

    </div> 
</div> 

，然後製作一個除了你的CSS：

<style type="text/css"> 
    .features > div { display: none; } 
</style>