Question

目前，当您点击一个div框时，它会在屏幕上向左移动，下一个div框将从右侧进入屏幕。需要的是，单击菜单链接滚动到相应的div容器。 E.g点击链接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上的第8次更新中查看。

Answer 2

没有测试过这个，但我认为它应该给你基本的想法。

$(".btns a").each(function(index, a) {
    $(a).click(function() {
        var boxnum = index + 1;
        $(window).scrollTop($("#box" + boxnum).offset().top);
    });
}

如何使用javascript或jquery将这个菜单栏链接到这个div内容中？

2 个答案: