使用JQuery如何显示和隐藏不同div的onClick事件 [英] Using JQuery how to show and hide different div's onClick event

问题描述

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

I would like to show a div based on the Onclick event of an link.

第一次点击 - 显示div1

第二次点击 - 隐藏剩余的div和显示div2

第三次点击 - 隐藏剩余的div并显示div3

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

First Click - Show div1
Second Click - Hide remaining div's and Show div2
Third Click - Hide remaining div's and show div3
Fourth Click - Hide remaining div's and show div1 => repeat the loop and goes on..

代码关注：

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代码：

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

上面的代码显示了第一次单击时的所有div，但是它应该在第一次点击时显示div1。

The above code shows all divs on first click itself but it should show div1 on first click as mentioned.

推荐答案

我会尝试我的拍摄。

编辑：
然后，为了避免使用全局变量，最好执行以下操作：

After second though, to avoid global variable use it's better to do the following

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

这篇关于使用JQuery如何显示和隐藏不同div的onClick事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！