Uso de JQuery para mostrar y ocultar diferentes div en el evento onClick

Question

Me gustaría mostrar un div basado en el evento Onclick de un enlace.

primer clic - Mostrar div1
segundo clic - Ocultar restante del div y Mostrar Div2
tercer clic - Ocultar restante del div y mostrar div3
Cuarta Click - Hide restante del div y mostrar div1 => repetir el bucle y continúa ..

código sigue:

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

Código Jquery:

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

El código anterior muestra todos los divs en primer lugar, haga clic en sí, sino que debe mostrar div1 en primera posición como se ha mencionado.

Answer 1

Voy a tratar mi tiro.

---

EDIT: Después de segundos, sin embargo, para evitar el uso variable global que es mejor hacer lo siguiente

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

Answer 2

Debe agregar un contador en la función.

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

Answer 3

Una forma sencilla sería introducir una variable que dio seguimiento a los clics, por lo menos así:

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

     etc etc 

     tracker ++; 

    }); 
}); 

Answer 4

Mi solución es un poco diferente - lo haría dependiente del estado de la divs en el momento actual (al hacer clic). Vea a continuación lo que quiero decir con esto.

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

Sólo para advertirle - No he probado este código :) En base a la siguiente para determinar la visibilidad: http://docs.jquery.com/Frequently_Asked_Questions#How_do_I_determine_the_state_of_a_toggled_element.3F

creo que sirve

Answer 5

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

Answer 6

que probablemente hacer algo como: (Lo siguiente asume todas sus <div> s están en un contenedor con id "contenedor")

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

Answer 7

Prefiero usar método de "filtro" y hacer el trabajo un poco más fácil con contador:

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

})(); 

Answer 8

La función .toggle en jQuery toma cualquier número de argumentos de funciones, por lo que el problema ya está resuelto. Ver los documentos en Eventos.

Answer 9

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

Answer 10

¿Qué tal esto

Working Example here - añadir /editar a URL para editar el código

$('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; 

    }); 

}); 

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

Esto podría ser fácilmente envuelto arriba en un plugin

Answer 11

primero hay que añadir la consulta de archivos básica:

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

Después hay que añadir el siguiente código:

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

Añadir el código anterior en la parte de la cabecera y el código de abajo en la porción del cuerpo.

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

El código está listo para la imagen diferente haga clic para mostrar y ocultar div.

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