淡出淡出Javascript选项卡

FadeIn FadeOut Javascript tabs

本文关键字：淡出 Javascript 选项      更新时间：2023-09-26

我已经创建了一些选项卡内容的演示，无法理解如何在单击时淡入和淡出它们，因此内容淡入而不是选项卡标题。

演示
$('#tab-wrapper li:first').addClass('active');
$('#tab-body > div').hide();
$('#tab-body > div:first').show();
$('#tab-wrapper a').click(function() {
    $('#tab-wrapper li').removeClass('active');
    $(this).parent().addClass('active');
    var activeTab = $(this).attr('href');
    $('#tab-body > div:visible').hide();
    $(activeTab).show();
    return false;
});

我会说尽快隐藏活动选项卡。然后.fadeIn()选中tab;.fadeOut()和.fadeIn()看起来不太好。

$('#tab-body > div:visible').hide();
$(activeTab).fadeIn();

小提琴

试试这个->用fadeIn和fadeOut代替show和hide 

$('#tab-wrapper li:first').addClass('active');
$('#tab-body > div').fadeOut();
$('#tab-body > div:first').fadeIn();
$('#tab-wrapper a').click(function() {
    $('#tab-wrapper li').removeClass('active');
    $(this).parent().addClass('active');
    var activeTab = $(this).attr('href');
    $('#tab-body > div:visible').fadeOut();
    $(activeTab).fadeIn();
    return false;
});

在代码中使用fadeIn()代替show和fadeOut()代替hide 

$('#tab-body > div:visible').fadeOut();
    $(activeTab).fadeIn();

检查一下http://jsfiddle.net/kka284556/PtjKL/2/

你可以像这样编辑你的代码来拥有一个"传统的"过渡:

  $('#tab-body > div:visible').hide("slow");
  $(activeTab).show("slow");
相关文章：