en remplaçant div contenu avec un clic en utilisant jquery

Question

Je vois cette question posée beaucoup dans les questions connexes, mais mon besoin semble très simple par rapport à ces exemples, et malheureusement je suis encore trop nouveau chez js pour savoir quoi retirer ... donc au risque d'être ce GUY, je vais poser ma question ...

J'essaie de sortir le contenu div dans une boîte en fonction du bouton poussé. En ce moment, je l'ai en utilisant la fonction animatedcollapse.toggle, mais cela ne semble pas très bien. Je veux le remplacer par un fondu de base sur le clic et fondu dans le nouveau contenu sur le bouton suivant.

idée de base:

<div> 
<ul> 
<li><a href="this will fade in the first_div"></li> 
<li><a href="this will fade in the second_div"></li> 
<li><a href="this will fade in the third_div"></li> 
</ul> 
<div class="first_container"> 
<ul> 
    <li>stuff</li> 
    <li>stuff</li> 
    <li>stuff</li> 
</ul> 
</div> 
<div class="second_container"> 
<ul> 
    <li>stuff</li> 
    <li>stuff</li> 
    <li>stuff</li> 
</ul> 
</div> 
<div class="third_container"> 
<ul> 
    <li>stuff</li> 
    <li>stuff</li> 
    <li>stuff</li> 
</ul> 
</div> 
</div> 

J'ai tout travailler avec l'effondrement animé, mais il est juste un effet laid pour cette situation, donc je veux changer dehors.

Merci! Joel

Answer 1

Joel, je pense avoir compris ce que tu voulais. Est-ce que this look est-ce exact? Dans le code ci-dessous j'ai également utilisé une convention où vous ajoutez js à l'attribut de classe sur HTML afin que vous puissiez personnaliser vos bits JS différemment. Si JS était désactivé, les trois onglets s'afficheraient dans l'ordre. Cependant, tant que JS est activé, votre code s'affichera comme souhaité.

Vous pourriez améliorer cela en réglant de façon dynamique la hauteur de la div #animators en fonction de la plus grande hauteur des enfants, mais cela devenait assez complexe!

J'ai légèrement modifié votre code HTML (à la fois pour les tests et les fonctionnalités).):

<div> 
    <ul> 
    <li><a href="#">First</a></li> 
    <li><a href="#">Second</a></li> 
    <li><a href="#">Third</a></li> 
    </ul> 
    <div id="animators"> 
    <div class="container"> 
    <ul> 
     <li>stuff1</li> 
     <li>stuff1</li> 
     <li>stuff1</li> 
    </ul> 
    </div> 
    <div class="container"> 
    <ul> 
     <li>stuff2</li> 
     <li>stuff2</li> 
     <li>stuff2</li> 
    </ul> 
    </div> 
    <div class="container"> 
    <ul> 
     <li>stuff3</li> 
     <li>stuff3</li> 
     <li>stuff3</li> 
    </ul> 
    </div> 
    </div> 
</div> 

Ajouter à votre CSS:

.js #animators { position: relative; height: 100px} 
.js #animators div.container { position: absolute; left: 0; top: 0 } 

Et utiliser cette JavaScript:

<script type="text/javascript"> 
    document.documentElement.className += " js"; // Add js class to the HTML element 
    $(function(){ 
    var $containers = $("#animators > div").hide(); 

    $('ul li a').each(function(i,el){ 
     var idx = i; 
     $(this).click(function(e){ 
     var $target = $containers.filter(':eq(' + idx + ')'); 
     // Fade out visible div 
     if($containers.filter(':visible').not($target).length){ 
      $containers.filter(':visible').fadeOut(); 
     } 
     // Fade in new div if not already showing 
     $target.not(':visible').fadeIn(); 
     e.preventDefault(); 
     }) 
    }) 
    }); 
</script> 

EDIT Voici un autre JavaScript bloc fadesOutpuisfadesIn:

<script type="text/javascript"> 
    document.documentElement.className += " js"; // Add js class to the HTML element 
    $(function(){ 
    var $containers = $("#animators > div").hide(); 

    $('ul li a').each(function(i,el){ 
     var idx = i; 
     $(this).click(function(e){ 
     var $target = $containers.filter(':eq(' + idx + ')'); 
     // Fade out visible div 
     if($containers.filter(':visible').not($target).length){ 
      $containers.filter(':visible').fadeOut(1000, function(){ 
      $target.not(':visible').fadeIn(1000); 
      }); 
     } else { 
      $target.not(':visible').fadeIn(1000); 
     } 

     e.preventDefault(); 
     }) 
    }) 
    }); 
</script> 

Answer 2

On dirait que toggle prend en charge un speed setting ... peut-être que ce serait plus élégant?

Answer 3

Que diriez-vous d'un JQuery fade out - http://docs.jquery.com/Effects/fadeOut, puis votre rappel est un fondu en?

..Je viens de voir votre lien dans les commentaires, c'est exactement ce qu'ils font sur les astuces CSS. Avez-vous une question plus spécifique?

MISE À JOUR La classe visible fait référence à la div qui sera visible ... n'a pas testé cela, mais il devrait être à peu près juste

$('.first_container').click(function(){ 
    $('.visible').fadeOut(3000,function(){ 
       this.removeClass('visible'); 
     $('.first_container').addClass('visible'); 
     $('.first_container').fadeIn(3000); 
    }); 
}) 

C'est le code pour faire référence à votre first_container .. ..vous pouvez partir de là

Answer 4

Si je l'ai bien compris votre question, cela peut être utile pour vous

<div id="LoadMe2"><h3>Please select what to edit!</h3></div> 
<script> 
$('a').click(function() { 
    $('#LoadMe2').load($(this).attr('href')); 

    return false; 
}); 
</script> 

et HTML peuvent être comme

<a href="abc.php" style="text-decoration:none"><input type="button" value="edit Header menu"></a> 

EDIT

désolé, cela vous aide pour récupérer le contenu de ces pages et l'affiche. en gardant ce poste comme quelqu'un d'autre peut avoir besoin de cela