使用jQuery使用Next Previous按钮显示隐藏div？

例如,我有10< div>,我想显示每个< div>点击下一步按钮&显示上一个< div>在上一个按钮单击.
如何使用jQuery做到这一点？

解决方法

<div class="divs">
     <div class="cls1">1</div>
     <div class="cls2">2</div>
     <div class="cls3">3</div>
     <div class="cls4">4</div>
     <div class="cls5">5</div>
     <div class="cls6">6</div>
     <div class="cls7">7</div>
 </div>
 <a id="next">next</a>
 <a id="prev">prev</a>

这是一个非常简单的HTML示例.

使用像这样的简单jQuery代码：

$(document).ready(function(){
    $(".divs div").each(function(e) {
        if (e != 0)
            $(this).hide();
    });

    $("#next").click(function(){
        if ($(".divs div:visible").next().length != 0)
            $(".divs div:visible").next().show().prev().hide();
        else {
            $(".divs div:visible").hide();
            $(".divs div:first").show();
        }
        return false;
    });

    $("#prev").click(function(){
        if ($(".divs div:visible").prev().length != 0)
            $(".divs div:visible").prev().show().next().hide();
        else {
            $(".divs div:visible").hide();
            $(".divs div:last").show();
        }
        return false;
    });
});

有关进一步说明：
第一个块将隐藏除第一个之外的每个div(e是jQuery的每个函数中的计数器).

另外两个块处理按钮上的单击.
我们正在寻找可见的div,然后点击我们接下来显示(参见jquery的next()函数或前面的div(jquery的prev()函数).

如果没有下一个div(在下一个按钮单击时),我们将隐藏可见的div并显示第一个div.

在线示例：http://jsfiddle.net/hsJbu/