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

Question

我想根据链接的 Onclick 事件显示一个 div。

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

Code Follows:

<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 Code :

$(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");
        }
        })());
});