javascript - 滑动 jquery 选项卡式内容

Question

有人可以帮我更改选项卡式内容代码，以便随着选项卡的更改而淡出和滑入和滑出选项卡式内容吗？

我正在使用 this script 。

以及 header 位中的代码:

$('ul.tabs li').click(function(){
    var tab_id = $(this).attr('data-tab');

    $('ul.tabs li').removeClass('current');
    $('.tab-content').removeClass('current');

    $(this).addClass('current');
    $("#"+tab_id).addClass('current')
})

非常感谢!

Answer 1

您可以尝试如下:

$('ul.tabs li').click(function(){
        var tab_id = $(this).attr('data-tab');

        $('ul.tabs li').removeClass('current');
        $('.tab-content').fadeOut(100).removeClass('current');

        $(this).fadeIn(1000).addClass('current');
        $("#"+tab_id).fadeIn(1000).addClass('current');
 })

更新

<强> UPDATED DEMO

要使用 SlideUp 和 SlideDown，请尝试如下操作:

$('ul.tabs li').click(function(){
        var tab_id = $(this).attr('data-tab');

        $('ul.tabs li').removeClass('current');
        $('.tab-content').slideUp("slow",function(){
              $(this).removeClass('current');
        });
        $(this).addClass('current');
        $("#"+tab_id).slideDown("slow",function(){
              $(this).addClass('current');
        });
})