解决方法
<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.