Ajax 选项卡淡入淡出效果问题 - jQuery 工具

Question

使用 jQuery 工具库时，我无法使具有淡入淡出效果的 Ajax 选项卡正常工作。它只显示 ajax 调用的第一个项目的效果，但没有其他内容。

您可以在 www.excellenthost(dot)com/beta/test.php 看到测试 URL 或看到下面的代码：

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 内容： shared/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>

正如您从示例中看到的，单击“电子邮件”选项卡时不会加载任何内容。当我执行 debugalert(data); 时，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 Tools Tabs 解决方案不太适合这个，所以我为您制作了一个自定义脚本：

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"> </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>