Problème avec afficher/masquer JavaScript

Question

Je vais avoir un blog ExpressionEngine qui placera les blocs de contenu conçus par l'utilisateur dans le pied de page. Mais, ça va seulement en montrer un à la fois.

Mon HTML ressemble à ceci:

<ul class="footernav"> 
    <li class="first"><a class="active" href="#">Get in touch</a></li> 
    <li><a href="#">Interested in joining?</a></li> 
    <li><a href="#">Feedback</a></li> 
    <li><a href="#">Link 4</a></li> 
</ul> 
<div class="copy gutters show"> 
    <p>Lorem Ipsum</p> 
</div> 
<div class="copy gutters hide"> 
    <p>Lorem Ipsum</p> 
</div> 
<div class="copy gutters hide"> 
    <p>Lorem Ipsum</p> 
</div> 

Je veux changer la classe d'exposition à une classe de peau en fonction du lien cliqué. Je ne sais pas comment je peux accomplir cela. Il doit être suffisamment flexible pour fonctionner avec N nombre de blocs de contenu - car ils seront définis par l'utilisateur dans ExpressionEngine. Je ne suis pas nouveau en JavaScript, donc j'apprécierais vraiment tout aperçu, ou une solution pour la façon dont je pourrais accomplir cela.

Answer 1

Je pense que cela fonctionnerait avec votre structure:

// Cycle through each link in our ul.footernav element 
$(".footernav a").each(function(i,o){ 
    // Attach click-logic to each link 
    $(this).click(function(e){ 
    // Prevent page from bouncing, reloading, etc. 
    e.preventDefault(); 
    // Add .active class to this, but remove from all other links 
    $(this).addClass("active").closest("li").siblings("li").find("a").removeClass("active"); 
    // Show any DIV having class .copy and same index as clicked link 
    // meaning, clicking the second link will show the second div 
    $("div.copy:eq("+i+")").show().siblings("div.copy").hide(); 
    }); 
}); 

Démo en ligne: http://jsbin.com/ekecu