Javascript 下一个和上一个导航，显示相应的DIV

我正在寻找一个脚本，它可以一次显示一个DIV并隐藏其余的DIV（在我的示例中为2个），此外，我希望用户能够来回导航

i、 e

一旦用户单击next，就会显示DIV 1，一直到DIV3 他还应该能够从DIV2到DIV1进行遍历，以此类推

我确实觉得这个发展很有趣

---

提前感谢10亿美元….

给出以下HTML：

<div class="sample">div1</div>
<div class="sample">div2</div>
<div class="sample">div3</div>
<a href="#" id="display" class="display">next</a>
<a href="#" id="display1" class="display">prev</a>

参考资料：

---

增编： 快速解释我为什么更改了：

div1
第二组
第三组
，而且据我所知，没有任何意义。为此，在上面的脚本中，我再次选择使用
类
名称，因为该属性的相同“值”是共享的，尽管可以使用
数据-*
属性，并且该属性是有效的


关闭
标记没有关闭任何内容，因此它们被更改为


也许可以代替<代码>：P

“我正在寻找脚本”。。。你是在寻求关于如何编写脚本的帮助，还是被提供一个脚本？你觉得它有多“有趣”？足够开始一个脚本吗？因为链接的jsfiddle有

s试图关闭

a

元素，以及

a

元素上的

value

属性（这似乎是无效的。那么，你被困在哪里了？我被困在上一个导航中了这是我遇到的另一个脚本让我先告诉你这个脚本像魔术一样工作哇谢谢十亿大卫为你花时间：）不客气；尽管我真的建议你开始学习HTML和JavaScript。

// selects all the divs of class='sample',hides them, finds the first, and shows it
$('div.sample').hide().first().show();

// binds a click event-handler to a elements whose class='display'
$('a.display').on('click', function(e) {
    // prevents the default action of the link
    e.preventDefault();

    // assigns the currently visible div.sample element to a variable
    var that = $('div.sample:visible'),
        // assigns the text of the clicked-link to a variable for comparison purposes
        t = $(this).text();

    // checks if it was the 'next' link, and ensures there's a div to show after the currently-shown one
    if (t == 'next' && that.next('div.sample').length > 0) {
        // hides all the div.sample elements
        $('div.sample').hide();

        // shows the 'next'
        that.next('div.sample').show()
    }
    // exactly the same as above, but checking that it's the 'prev' link
    // and that there's a div 'before' the currently-shown element.
    else if (t == 'prev' && that.prev('div.sample').length > 0) {
        $('div.sample').hide();
        that.hide().prev('div.sample').show()
    }
});​

<div name="sample">div1</div>
<div name="sample">div2</div>
<div name="sample">div3</div>
<a href="#" id="display" value="display">next</div>
<a href="#" id="display1" value="display">prev</div>