javascript - 如何使用 javascript 或 jquery 将此菜单栏链接到此 div 内容...？

Question

目前，当您单击某个 div 框时，它会转到屏幕左侧，而下一个 div 框将从右侧出现在屏幕上。需要的是，单击菜单链接滚动到相应的 div 容器。例如，单击链接 5 滚动到 div #5 任何人都可以帮助我...？这会对大家有很大帮助。

HTML

<ul class="btns">
        <li><a href="#" rel="box1">1</a></li>
        <li><a href="#" rel="box2">2</a></li>
        <li><a href="#" rel="box3">3</a></li>
        <li><a href="#" rel="box4">4</a></li>
        <li><a href="#" rel="box5">5</a></li>           
    </ul>

    <div id="container">

        <div id="box1" class="box">Div #1</div>
        <div id="box2" class="box">Div #2</div>
        <div id="box3" class="box">Div #3</div>
        <div id="box4" class="box">Div #4</div>
        <div id="box5" class="box">Div #5</div>

    </div>​

Javascript 和 Jquery 部分:

$('.btns>li a').click(function() {
                var page = $(this).attr('rel');
            });                


            $('.box').click(function() {
                $('.box').each( function() {
                    if ($(this).offset().left < 0) {
                        $(this).css("left", "150%");
                    }
                });

                $(this).animate({
                    left: '-50%'
                }, 500);

                if ($(this).next().size() > 0) {
                    $(this).next().animate({
                        left: '50%'
                    }, 500);
                } else {
                    $(this).prevAll().last().animate({
                        left: '50%'
                    }, 500);
                }
            });​

示例:http://jsfiddle.net/gHYSN/5/

Answer 1

好吧，这可能不是最好的方法，但它可以按要求工作。

function swdiv(currID, nxtID) {
    $('.box').each(function() {
        if ($(this).offset().left < 0) {
            $(this).css("left", "150%");
        }
    });
    $('#' + currID).animate({
        left: '-50%'
    }, 500);
    if ($('#' + nxtID).size() > 0) {
        $('#' + nxtID).animate({
            left: '50%'
        }, 500);
    }
}

$('.btns li a').click(function() {
    var page = $(this).attr('rel'),
        curID = 'box1',
        iWide = $(window).width() / 2;
    $('.box').each(function() {
        if ($(this).css('left') == iWide + 'px') {
            curID = $(this).attr('id');
        }
    });
    swdiv(curID, page);
});
$('.box').click(function() {
    $('.box').each(function() {
        if ($(this).offset().left < 0) {
            $(this).css("left", "150%");
        }
    });
    $(this).animate({
        left: '-50%'
    }, 500);
    if ($(this).next().size() > 0) {
        $(this).next().animate({
            left: '50%'
        }, 500);
    } else {
        $(this).prevAll().last().animate({
            left: '50%'
        }, 500);
    }
});

我创建了一个额外的函数来在两个 div 之间切换。第八次更新时查看fiddle .