使用jQuery使用Next Previous按钮显示隐藏div？
例如，我有10
，我想在下一个按钮上显示每个
在上一个按钮点击时显示前一个
。 如何使用jQuery做到这一点？
1 2 3 4 5 6 7 next prev
这是一个非常简单的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/
你可以这样做：
HTML：
div 1 div 2 div 3 div 4
JS：
$(document).ready(function() { var divs = $('.mydivs>div'); var now = 0; // currently shown div divs.hide().first().show(); // hide all divs except first $("button[name=next]").click(function() { divs.eq(now).hide(); now = (now + 1 < divs.length) ? now + 1 : 0; divs.eq(now).show(); // show next }); $("button[name=prev]").click(function() { divs.eq(now).hide(); now = (now > 0) ? now - 1 : divs.length - 1; divs.eq(now).show(); // show previous }); });
的jsfiddle
如果你想自己做，请尝试以下方法。 将所有div设置为display：none，除了first之外。 也可以在下面的代码中根据你拥有的div数改变maxdiv值（如果数字可以改变，则在jquery中找到它）。
$(document).ready(function(){ var tracker = 1; var maxdivs = 4; $("#next").click(function(){ var divclass = ".cls" + tracker; $(divclass).css("display","none"); tracker = tracker + 1; if(tracker > maxdivs) tracker = 1; divclass = ".cls" + tracker; $(divclass).css("display","block"); }); $("#prev").click(function(){ var divclass = ".cls" + tracker; $(divclass).css("display","none"); tracker = tracker - 1; if(tracker < 1) tracker = maxdivs; divclass = ".cls" + tracker; $(divclass).css("display","block"); }); });
它听起来像你想要的旋转木马
以下是一些示例： http ： //www.tripwiremagazine.com/2012/12/jquery-carousel.html
您可以使用下一个和上一个按钮在div中滑动，旧的滑动（或任何其他效果）
旋转木马不依赖于图像，它可以是Divs内容。
祝你好运，祝你有个美好的一天
编辑：Bootstraps自己的旋转木马： http ： //twitter.github.io/bootstrap/javascript.html#carousel