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

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

我想基于链接的Onclick事件显示一个div。

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..

第一次点击-显示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 :

Jquery代码:

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

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

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

12 个解决方案

#1

I'll try my shot.

我会努力的。

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

#2

You should add a counter in the function.

您应该在函数中添加一个计数器。

$(document).ready(function() {
    var count = 0;

    $("#toggle_value").click(function(){
        if (count == 0) {
            $("#div1").show("fast");
            $('#div2').hide();
            count++;
        }
        else if (count == 1) {
            $("#div2").show("fast");
            ...
            count++;
        }
        else if (count == 2) {
            $("#div3").show("fast");
            ....
            count++;
        }
        else {
             $('div').hide();
             count=0;
        }
    });
});

#3

How about this

这个怎么样

Working Example here - add /edit to URL to edit the code

这里的工作示例-添加/编辑到URL来编辑代码。

$('html').addClass('js'); // prevent hiding divs on DOM ready from 'flashing'

$(function() {

  var counter = 1;

  $('#toggle_value').click(function() {
    $('div','#container')
      // to stop current animations - clicking really fast could originally
      // cause more than one div to show 
      .stop() 
      // hide all divs in the container
      .hide() 
      // filter to only the div in question
      .filter( function() { return this.id.match('div' + counter); })
      // show the div 
      .show('fast');

    // increment counter or reset to 1 if counter equals 3
    counter == 3? counter = 1 : counter++; 

    // prevent default anchor click event
    return false; 

  });

});

and HTML

和HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<title>Div Example</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">

    body { background-color: #fff; font: 16px Helvetica, Arial; color: #000; }
    .display { width:300px; height:200px; border: 2px solid #000; }
    .js .display { display:none; }

</style>
</head>
<body>
<div class="toggle_button">
      <a href="#" id="toggle_value">Toggle</a>
</div>
<br/>
<div id='container'>
    <div id='div1' class='display' style="background-color: red;"> 
        div1
    </div>

    <div id='div2' class='display' style="background-color: green;"> 
        div2
    </div>

    <div id='div3' class='display' style="background-color: blue;"> 
        div3
    </div>
<div>

</body>
</html>

This could easily be wrapped up in a plugin

这可以很容易地封装在插件中

#4

A simple way would be to introduce a variable that tracked clicks, so something like this:

一个简单的方法是引入一个跟踪点击的变量，比如:

var tracker = 0;    
$(document).ready(function() {
    $("#toggle_value").click(function(){
       if(tracker == 0)
       {
          $("#div1").show("fast");
       }else if(tracker ==1)

       etc etc

       tracker ++;

    });
});

#5

My solution is a little different - I'd do it dependant on the state of the divs at the current time (on click). See below for what I mean by this.

我的解决方案有点不同——我将根据divs当前的状态(单击)进行处理。下面是我的意思。

$(document).ready(function() {
    $("#toggle_value").click(function(){
       if ($("#div1).is(':visible')) { // Second click
            // Hide all divs and show d2
            $("#div1").hide();
            $("#div2").show("fast");
            $("#div3").hide();
            $("#div4").hide();
       } else if ($("#div2").is(':visible')) { // Third click
            // follow above example for hiding all and showing div3
       } else if ($("#div3").is(':visible')) { // Fouth click
            // follow above example for hiding all and showing div1
       } else { // first click
            // All divs should be hidden first. Show div1 only.
            $("#div1").show("fast");
       }
    });
});

Just to warn you - I have not tested this code :) Based upon the following for determining visibility: http://docs.jquery.com/Frequently_Asked_Questions#How_do_I_determine_the_state_of_a_toggled_element.3F

只是为了警告您——我还没有测试此代码:)基于以下用于确定可见性的代码:http://docs.jquery.com/ently_asked_questions # how_do_i_e_of_a_toggled_element.3f。

Hope it helps

希望它能帮助

#6

I prefer to use "filter" method and make a little easier work with counter:

我更喜欢使用“filter”的方法，让计数器的工作更容易一些:

(function () {
    var divCounter = 0, divs;

    $(function () {
        divs = $('#div1, #div2, #div3');
        $('#toggle_value').click(function (e) {
            divs.hide() // hide other divs
                .filter(function (index) { return index == divCounter % 3; }) // select appropriate div
                .show('fast'); // and show it

            divCounter++;
        });
    });

})();

#7

I would probably do something like: (The following assumes all your <div>s are in a container with id "container")

我可能会这样做:(以下假设您的

s都位于一个带有id“container”的容器中)

$(document).ready(function() {
  var $allDivs = $("#container > div");
  var counter = 0;

  $("#container > div").click(function(){
    counter = counter < $allDivs.length - 1 ? counter + 1 : 0;
    $allDivs.not(":eq("+counter +")").hide("fast");
    $allDivs.eq(counter).show("fast");
  });
});

#8

The .toggle function in jQuery takes any number of argument functions, so the problem is already solved. See the docs under Events.

jQuery中的.toggle函数接受任意数量的参数函数，因此问题已经解决。查看事件下的文档。

#9

$("#toggle_value").click(function()
{
   $("#div" + (++c) % 3).show().siblings().hide();        
}

#10

var c = 1;
$("#toggle_value").click(function()
{
   $("#div" + c).hide("fast");        
   $("#div" + ++c).show("fast");
   if (c > 3) c=1;       
});

#11

First You have to add query basic file:

首先要添加查询基本文件:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

Then you have to add the following code:

然后你需要添加以下代码:

<script type="text/javascript">
    $(document).ready(function () {
        $("#hide").click(function(){
            $(".slider_area").hide(1000);
            $("#show").css("display","block");
            $("#hide").css("display","none");
        });
        $("#show").click(function(){
            $(".slider_area").show(1000);
            $("#show").css("display","none");
            $("#hide").css("display","block");
        });
    });
</script>

Add the code above into the header portion and the code below in the body portion.

将上面的代码添加到标题部分，然后将下面的代码添加到正文部分。

<img src="images/hide-banner.png" id="hide" class="link right"/>
<img src="images/show-banner.png" id="show" class="link right dis" />

The code is ready for the different image click for show and hide div.

代码为显示和隐藏div准备好了不同的图像单击。

#12

<div id="div_<%=id>">
</div>
<div id="Hide_<%=id>" style="display:none;">
</div>
<div id="div_<%=id>">
</div>
<div id="Hide_<%=id>" style="display:none;">
</div>
<div id="div_<%=id>">
</div>
<div id="Hide_<%=id>" style="display:none;">
</div>
<div id="div_<%=id>">
</div>
<div id="Hide_<%=id>" style="display:none;">
</div>
<script>
var temp = 0;
var temp1 = 0;
$("#div_<%=id>").click(function(){
    if (temp1 == 0)  {
        $('#' + temp).hide();
        temp = 'Hide_<%=id>';
        $('#Hide_<%=id>').show();
        temp1 = 1;
        }
        else{
        $('#' + temp).hide();   
        temp = 'Hide_<%=id>';
        $('#Hide_<%=id>').show();
        temp1 = 0;
        }
});
</script>

#1