Toggle trois divs avec un

Question

Ce que je fais: J'ai trois DIV, chacun d'eux agissant comme un bouton pour échanger un div avec un contenu différent.

[BOX_1] [BOX_2] [BOX_3] [-------- ------------ BOX_4]

Par exemple: Si vous cliquez sur BOX_1, il permute BOX_4 avec BOX_1_CONTENT & (en cliquant BOX_1 retourne à nouveau à BOX_4) Si vous cliquez sur BOX_2, il permute BOX_4 avec BOX_2_CONTENT & (en cliquant BOX_2 il retourne à nouveau à BOX_4) Si vous cliquez sur BOX_3, il swaps BOX_4 sur avec BOX_3_CONTENT & (en cliquant BOX_3 il retourne à nouveau à BOX_4)

BOX_1_CONTENT, BOX_2_CONTENT et BOX_3_CONTENT sont tous configurés pour s'afficher: aucun; et apparaissent après avoir cliqué.

ce qui fonctionne: Il fonctionne très bien si vous n'aller et venir (contenu à savoir en cliquant sur le basculer BOX_1 avant et en arrière).

Mon problème: Je ne parviens pas à traiter BOX_1 puis Clicking avant de basculer en crochetant BOX_2 ou BOX_3.

Il semble que j'ai besoin d'un moyen de gérer des scénarios tels que: Cliquez sur BOX_1 (échange BOX_4 avec BOX_1_CONTENT), puis immédiatement sur BOX_3 et échangez BOX_1_CONTENT avec BOX_3_CONTENT.

Toutes les suggestions sur une meilleure façon de le faire?

<script> 
$(document).ready(function(){ 
    $(".BOX_1").click(function() 
    {   
     $('.BOX_4, .BOX_1_CONTENT').fadeToggle("slow"); 
    }); 

     $(".BOX_2").click(function() 
    {   
     $('.BOX_4, .BOX_2_CONTENT').fadeToggle("slow"); 
    }); 

     $(".BOX_3").click(function() 
    {   
     $('.BOX_4, .BOX_3_CONTENT').fadeToggle("slow"); 
    }); 

}); 
</script> 

Answer 1

est ce que vous cherchez:

HTML:

<div class="BOX_1">BOX 1</div> 

<div class="BOX_2"> 
BOX 2 
</div> 

<div class="BOX_3"> 
BOX 3 
</div> 

<!-- data-content is to check do we have content or which boxes's content do we hv now --> 
<div class="BOX_4" data-content="">BOX 4 (CONTENT TO BE REPLACED)</div> 

<div class="BOX_1_CONTENT">CONTENT FOR BOX 1</div> 
<div class="BOX_2_CONTENT">CONTENT FOR BOX 2</div> 
<div class="BOX_3_CONTENT">CONTENT FOR BOX 3</div> 

JS:

$(document).ready(function(){ 
    var b4c = $('.BOX_4').html(); // content of box 4 so that we cn refer to it later 
    $(".BOX_1,.BOX_2,.BOX_3").click(function() 
    { 
     var active_content = $(".BOX_4").data('content'); 
     var cls = $(this).attr('class'); 
     if(active_content == '') 
     { 
     $(".BOX_4").html($("."+cls+'_CONTENT').html()) 
     $(".BOX_4").data('content',cls); 
     } 
     else 
     { 
     if(active_content == cls) 
     { 
      $('.BOX_4').html(b4c).data('content',''); 
      } 
      else 
      { 
      $(".BOX_4").html($("."+cls+'_CONTENT').html()) 
       $(".BOX_4").data('content',cls); 
      } 
     } 
    }); 

});