Question

我有一个基于ajax数据属性的标签代码。 Tabs内容通过data-attribute从PHP代码加载ajax。如何设置标签内容的淡入/淡出效果？我试着做，但我没有成功。

$(document).ready(function() {
  $("#tab-entry").load('index.php', {
    tab: 1
  });
  $("#tab-entry").promise().done(function() {
    $("#loading").hide("normal").prev("#tab-entry").delay(1000).show("normal");
  });
  $(".tab-button").click(function() {
    var tab = $(this).attr("data-tab");
    var dl = $("#tab-entry").attr("data-load");
    if (tab !== dl) {
      $(this).parent("li").parent("ul").find(".active").removeClass("active");
      $(this).parent("li").addClass("active");
      $("#tab-entry").each(function() {
        $(this).attr("data-load", tab).hide('normal').load('index.php', {
          tab: tab
        }).next("#loading").delay(500).show();
      });
      $("#tab-entry").promise().done(function() {
        $("#loading").delay(500).hide("normal").prev("#tab-entry").delay(1000).show("normal");
      });
    }
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="tab-header0">
  <ul id="tab-header">
    <li class="active">
      <a class="tab-button" data-tab="1">1st Tab</a>
    </li>
    <li>
      <a class="tab-button" data-tab="2">2nd Tab</a>
    </li>
    <li>
      <a class="tab-button" data-tab="3">3rd Tab</a>
    </li>
    <li>
      <a class="tab-button" data-tab="4">4th Tab</a>
    </li>
  </ul>
</div>


<div class="tab-content">
  <div id="tab-entry" style="display:none" data-load="1"></div>
  <div id="loading">Load ... </div>
</div>

Answer 1

我认为这就是你要做的。我已经注释并给出了一个JSFiddle以供参考。用ajax代替你的页面名称：

$(document).ready(function() {
  function doAjax(content)
    {
        $.ajax({
            // Send to 
            'url': 'index.php',
            'data':{
                'html': content
            },
            'method':'post',
            'success':function(response) {
                // On done, fade out the current content
                $('#loading').fadeOut('slow',function() {
                    // On done, fade in new content
                    $(this).html(response).fadeIn('slow');
                });
            }
        });
    }
    // Load first content
    doAjax($('.active').find('a').data('tab'));
    // Onclick of the tab
    $(this).on('click','.tab-button',function(){
        // Remove the instance of active
        $('.active').removeClass('active');
        // Traverse and add active
        $(this).parents('li').addClass('active');
        // Load the ajax for this tab
        doAjax($(this).data('tab'));
    });
});

JSFiddle Example

如何在ajax标签

1 个答案: