Question

HTML结构

<div class="main">
    <div class="boxes">Content here</div>
    <div class="boxes">Content here</div>
    <div class="boxes">Content here</div>
    <div class="boxes">Content here</div>
    <div class="boxes">Content here</div>
    <div class="nav">
        <a href="#" class="next"></a>
        <a href="#" class="prev"></a>
    </div>
</div>

我希望下一个和上一个按钮在单击时滚动框。

在小提琴上找到这个 - ＆gt; http://jsfiddle.net/FWXc5/

但我需要下一个＆amp;只有prev按钮而不是每个框的相应项目/按钮。

非常感谢任何帮助，

干杯

Answer 1

通过使用jQuery next（）和prev（）方法，您可以实现此目的。

尝试使用以下代码

<强> HTML

<div id="home-block">
    <div class="current">Content Goes here</div>
    <div>A box of content</div>
    <div>Content</div>
    <div>More content...</div>
</div>

<div id="nav-right">
    <input type="button" value="Prev" id="prev" />
    <input type="button" value="Next" id="Next" />
</div>

<强> CSS

#home-block div{
width: 300px;
height: 400px;
border: 1px solid #000;
box-shadow: 1px 1px 3px #888;
margin: 10px 10px 10px 15px;
}

.post-contain{
position: relative;
margin: 0 auto;
width: 450px;
border: 1px solid #000;
}

#nav-right{
    position: fixed;
    right: 15px;
    top: 35%;
}

.current {
    color: red;
}

jQuery代码

 $('#nav-right input[type=button]').click(function(e) {
        if($(this).attr('id') == 'prev') {
            $(".current").prev().addClass("current");
            $(".current").eq(1).removeClass("current");
            $('html, body').animate({
                scrollTop: $(".current").offset().top
            }, 250);
        }else if($(this).attr('id') == 'Next') {
            $(".current").next().addClass("current");
            $(".current").eq(0).removeClass("current");
            $('html, body').animate({
                scrollTop: $(".current").offset().top
            }, 250);
        }
    });

演示：http://jsfiddle.net/31bb118w/

Answer 2

您可以使用nextSibling和previousSibling属性。

jQuery使用下一个/上一个按钮滚动多个div

2 个答案: