jquery - 的页面转换不起作用

Question

我正在使用此代码:http://askmike.org/2011/12/smooth-page-transitions-using-jquery-video/对于我的页面。

下面是我修改的 Javascript 代码:

$(function() {
    var request = window.location.hash;
    if(request == '#page-2') {
        $('.page.current').removeClass('current');
        $('.page').eq(1).addClass('current');
    }
        if(request == '#page-3') {
        $('.page.current').removeClass('current');
        $('.page').eq(2).addClass('current');
    }
        if(request == '#page-4') {
        $('.page.current').removeClass('current');
        $('.page').eq(3).addClass('current');
    }
    $('nav a').click(function(){
        var speed = 200;
        var i = $(this).index();
        $('.page.current').animate({opacity: 0, marginTop:0},speed,function(){
            $(this).removeClass('current');
            $('.page').eq(i).css('marginTop',30).animate({opacity:1,marginTop: 0},speed).addClass('current');
        });
    });
});

每当我将链接放入无序列表时，它就不再知道要显示哪个 div。我不是 Javascript 的专家，因为我只是借用代码，但我猜测将它放在列表中可以防止代码知道对它排序的是哪一个(如果这有意义的话)。任何帮助将非常感激。这是一个 jsFiddle:http://jsfiddle.net/YUH6s/1/谢谢。

Answer 1

在您的 anchor 链接标记索引中始终为 0 并且您的 eq 方法仅选择第一个 .page 元素。您可以找到父 li 元素的索引。

改变:

$(this).index()

收件人:

$(this).parent().index()

http://jsfiddle.net/Xht3v/