使用JQuery如何显示和隐藏不同div的onClick事件

Question

我想根据链接的Onclick事件显示div.

首先单击 - 显示div1
第二次单击 - 隐藏剩余div并显示div2
第三次单击 - 隐藏剩余div并显示div3
第四次单击 - 隐藏剩余div并显示div1 =>重复循环并继续...

代码遵循:

<div class="toggle_button">
      <a href="javascript:void(0);" id="toggle_value">Toggle</a>
</div>


<div id='div1' style="display:none;"> 
  <!-- content -->
</div>

<div id='div2' style="display:none;"> 
  <!-- content -->
</div>

<div id='div3' style="display:none;"> 
  <!-- content -->
</div>

Jquery代码:

$(document).ready(function() {
        $("#toggle_value").click(function(){
           $("#div1").show("fast");
           $("#div2").show("fast");
           $("#div3").show("fast");
        });
});

上面的代码显示了第一次单击时的所有div,但是如上所述它应该在第一次单击时显示div1.

Answer 1

我会尝试拍摄.

编辑:在第二个之后,为了避免使用全局变量,最好执行以下操作

$(document).ready(function() {
        $("#toggle_value").click((function(){
        var counter = 0;
        return function()
        {
           $("#div" + counter).hide("fast");
           counter = (counter % 3) + 1;
           $("#div" + counter).show("fast");
        }
        })());
});