Question

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

您可以在 www.excellenthost（dot）com / beta / 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 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 Tools，它可以完成所需的所有渐弱和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>

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

2 个答案: