幻灯片第二次不起作用

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
   });
});

进一步阅读：

• What's the difference between jquery's data(key,val) and attr(data-key,data-val)

• jQuery data() vs attr(data)

• jQuery Data vs 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();*/
});