jquery - 幻灯片第二次不起作用

Question

当我点击我的导航链接时，当前的 div 应该向上滑动，新的应该向下滑动，但它只能工作一次。

jsFiddle

 $(".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

尝试使用.data()而不是attr()，它们并不完全相同

$(".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 数据（）与 attr（数据）

• jQuery 数据与属性？

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();*/
});