jquery - 2回目でスライドが動かない

Question

ナビゲーション リンクをクリックすると、現在の div が上にスライドし、新しい div が下に来るはずですが、一度しか機能しません。

jsフィドル

 $(".nav-link").click(function(){
       var page = $(this).data("page");
       var active = $("#viewport").data("active");
       $(active).slideUp(500, function(){
           $(active).css({'display':'none'});
           $(page).slideDown(250);
           $("#viewport").attr("data-active", page);
       });
    });

何が悪いのかわかりません。

ありがとう！

Answer 1

attr( )の代わりに.data()を使用してみてください。まったく同じではありません

$(".nav-link").click(function(){
   var page = $(this).data("page");
   var active = $("#viewport").data("active");
   $(active).slideUp(500, function(){
       $(active).css({'display':'none'});
       $(page).slideDown(250);
       $("#viewport").data("active", page); // The updated row
   });
});

さらに読むには：

• jqueryのdata(key,val)とattr(data-key,data-val)の違いは何ですか?

• jQuery data() vs attr(data)

• jQueryデータとAttr?

Answer 2

これを試して

$(document).ready(function () {
    $("#startseite").css({
        'display': 'block'
    });

    $(".nav-link").click(function () {
        var page = $(this).attr("data-page");
        var active = $("#viewport").attr("data-active");
        $(active).slideUp(500, function () {
            $(active).css({
                'display': 'none'
            });
            $(page).slideDown(250);
            $("#viewport").attr("data-active", page);
            page = 0;
            active = 0;
        });
    });

    /*  $("#nav-slider").slider();*/
});