utilizzando jQuery come mostrare e nascondere evento onClick diverso div

Question

vorrei mostrare un div in base l'evento onclick di un collegamento.

First Click - Visualizza div1
secondo scatto - Nascondi restante div and Show div2
Terzo Click - Nascondere restante div e mostra div3
Quarto Click - Nascondere restante div e mostrare div1 => ripetere il ciclo e va avanti ..

codice segue:

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

codice jQuery:

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

Il codice sopra mostra tutti i div il primo clic sé, ma dovrebbe mostrare div1 sul primo scatto come accennato.

Answer 1

farò del mio colpo.

---

EDIT: Dopo il secondo, però, per evitare di usare variabile globale è meglio effettuare le seguenti operazioni

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

Si dovrebbe aggiungere un contatore nella funzione.

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

Un modo semplice sarebbe quella di introdurre una variabile che rintracciato clic, quindi qualcosa di simile:

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

La mia soluzione è un po 'diverso - mi piacerebbe farlo dipende dallo stato della div al momento attuale (al clic). Vedi sotto per cosa intendo con questo.

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

solo avvertirti - non ho ancora testato questo codice :) Sulla base di quanto segue per determinare la visibilità: http://docs.jquery.com/Frequently_Asked_Questions#How_do_I_determine_the_state_of_a_toggled_element.3F

Speranza che aiuta

Answer 5

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

Answer 6

avrei probabilmente fare qualcosa di simile: (Di seguito si assume tutti i tuoi <div> s sono in un contenitore con id "contenitore")

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

io preferisco usare metodo "filtro" e rendere il lavoro un po 'più facile con contatore:

(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 funzione .toggle in jQuery prende qualsiasi numero di funzioni argomento, quindi il problema è già risolto. Vedi i documenti sotto Eventi.

Answer 9

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

Answer 10

ne dite di questo

Working Example here - aggiunge /modificare a URL per modificare il codice

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

    }); 

}); 

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

Questo potrebbe facilmente essere avvolto nel un plugin

Answer 11

Prima di tutto bisogna aggiungere query di file di base:

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

Poi si deve aggiungere il seguente codice:

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

aggiungere il codice sopra in parte di intestazione e il codice qui sotto nella parte del corpo.

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

Il codice è pronto per l'immagine diversa fare clic per mostrare e nascondere 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>