我已经创建了一些选项卡内容的演示,无法理解如何在单击时淡入和淡出它们,因此内容淡入而不是选项卡标题。
演示$('#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");