Utilisation de jQuery pour afficher/masquer un div puis afficher/masquer un div dans ce div

Question

J'ai une série de liens imbriqués dans un div. Lorsque l'un de ces liens est cliqué, je voudrais cacher la div avec le lien qui a été cliqué et montrer une autre div. Ensuite, si un lien est cliqué dans ce div, je voudrais changer le div à un autre div.

Le html ressemble à ceci:

<div id="main"> 
    <div class="item"><a href="">Link to div A</a></div> 
    <div class="item"><a href="">Link to div B</a></div> 
    <div class="item"><a href="">Link to div C</a></div> 
</div> 

<div id="a" style="display:none;">Link to div <a href="">B</a> and <a href="">C</a></div> 
<div id="b" style="display:none;">Link to div <a href="">A</a> and <a href="">C</a></div> 
<div id="c" style="display:none;">Link to div <a href="">A</a> and <a href="">B</a></div> 

Je suis un peu trébuché avec le jQuery sur celui-ci. Est-ce que quelqu'un a des conseils sur la façon de travailler avec jQuery? Montrer/cacher un div semble simple, mais le faire à nouveau dans les divs me trouble.

Merci!

Answer 1

Je ne sais pas si c'est exactement ce que vous cherchez, mais j'ai assemblé ce jsFiddle pour que vous puissiez le voir. Voir here.

J'ai ajouté quelques modifications afin que vous puissiez identifier les points d'ancrage se rapportent à laquelle div, donc mon HTML se présente comme suit:

<div id="main"> 
    <div class="item"><a href="#" name="a">Link to div A</a></div> 
    <div class="item"><a href="#" name="b">Link to div B</a></div> 
    <div class="item"><a href="#" name="c">Link to div C</a></div> 
</div> 

<div class="item" id="a" style="display:none;"> 
    Link to div <a href="#" name="b">B</a> and <a href="#" name="c">C</a> 
</div> 
<div class="item" id="b" style="display:none;"> 
    Link to div <a href="#" name="a">A</a> and <a href="#" name="c">C</a> 
</div> 
<div class="item" id="c" style="display:none;"> 
    Link to div <a href="#" name="a">A</a> and <a href="#" name="b">B</a> 
</div> 

Ensuite, une simple utilisation de jQuery et il semble fonctionner comme vous » décrit. Jetez un oeil à la jsFiddle j'ai fait et laissez-moi savoir si c'est ce que vous recherchez.

$(document).ready(function() { 

    // Hook up the first divs 
    $(".item a").click(function() { 

     // Get the target from the name of the anchor 
     var targetDiv = $(this).attr("name"); 

     // Show the new div and hide the parent div 
     $("#" + targetDiv).css("display", ""); 
     $(this).parents("div:last").css("display", "none"); 

    }); 

});