切换多个div之间的可见性

Question

我正在尝试找到最简单的JS解决方案,最好是jQuery,以实现以下目标:我有许多div,都具有相同的类,我想简单地切换每个的可见性,一次一个.

<a href="#" id="toggle-trigger">Toggle Div Visibility</a>    
<div class="slide" id="slide-one"></div>
<div class="slide" id="slide-two"></div>
<div class="slide" id="slide-three"></div>
<div class="slide" id="slide-four"></div>
<div class="slide" id="slide-five"></div>

默认情况下,第一个div始终通过CSS显示.

.slide{
display:none;
}
#slide-one{
display:block;
}

除了在两个元素之间切换,而不是多个项目之外,我一直无法找到任何其他内容.如果我能在其他地方找到答案,请告诉我.谢谢

Answer 1

像这样的东西？

  ?$(?'#toggle-trigger')??????????.click(function()
  {
    var $Current = $('.slide:visible');
    var $Slides = $('.slide');
    var $Next = $Current.next();
    if ($Next.length == 0) $Next = $Slides.first();
    $Slides.hide();
    $Next.show();
  });

我为它做了一个JSFiddle:http://jsfiddle.net/uxqBx/