Afficher et masquer plusieurs divs en cliquant sur les liens

Question

La situation est comme ceci:

J'ai plusieurs liens, chacun avec un div caché qui doit être affiché lorsque l'utilisateur clique sur le lien spécifique. Bien sûr, le div déjà visible d'un autre lien doit être caché dans la même opération. Tous les divs sont cachés par défaut. Je pensais que la manière la plus simple est d'assigner un id actif au div enfant du lien cliqué puis show() #active, ensuite à chaque clic sur un autre div je cacherais l'identifiant #active, je l'assignerais à un autre div puis afficher l'identifiant. Est-ce possible et à quoi ressemblerait le code? Oui, je suis un débutant Jquery. Le code html ressemble à:

<div class="nav"> 
    <ul> 
     <li><a href="#" title="show phone #(403) 454-5526">Call us</a> 
      <div class="navLinks"> (403) 454-5526 </div> 
     </li> 
     <li><a href="#">Visit our website</a> 
       <div class="navLinks"> Content Here </div> 
     </li> 
     <li><a href="#"Email us</a> 
       <div class="navLinks"> Content Here </div> 
     </li> 
     <li><a href="#">Send to a friend</a> 
       <div class="navLinks"> Content Here </div> 
     </li> 
    </ul> 
</div> 

Answer 1

Que diriez-vous de quelque chose comme ça?

$(".nav a").on("click", function(e) { 
    var div = $(this).siblings(".navLinks").toggle(); 
    $(".navLinks").not(div).hide(); 
    e.preventDefault(); 
});​ 

DEMO:http://jsfiddle.net/4ncew/1/

Answer 2

Essayez ce, Demo

$('.nav li a').click(function(){  
    $('.navLinks').css('display', 'none'); 
    $(this).next().css('display', 'block'); 
});​ 

Answer 3

Cela devrait faire ce que vous avez besoin:

​$​(document).ready(function(){ 
    $('.nav ul li a').click(function(){ 
     $('.navLinks').css('display','none'); 
     $(this).siblings('.navLinks').css('display','block'); 
    });  
});​​​​ 

Voici un jsFiddle pour vous de le tester : http://jsfiddle.net/2H4zD/3/

Answer 4

J'ai collé ici, essayez par vous-même: http://jsfiddle.net/Y97F8/

Voici le code qui le fait:

jQuery(function(){ 

    //hide all first 
    jQuery(".navLinks").hide(); //hide others 

    jQuery(".nav ul li a").each(function(i) { 
     jQuery(".nav ul li a").eq(i).click(function() { 
     jQuery(".navLinks").hide(); //hide others 
     jQuery(".nav ul li a").eq(i).next().show(); //show the div at the specified index 
     }); 
    }); 

});​