afficher le texte lorsque l'image est sur on-clic/masquer le texte lorsque l'image est différente cliquez sur

Question

J'ai créé les effets suivants sur les images vues here. Vous voyez quand vous passez la souris et cliquez ensuite sur chaque image, elles passent du gris à la couleur. Quand vous cliquez sur un - les autres deviennent gris et le clic reste la couleur. C'est cool, mais maintenant j'ai besoin du texte 1st: Sun par exemple pour afficher et masquer avec son bouton graphique. Le mot "Sun" est un lien qui doit être lié à une URL, il doit donc être séparé du code de l'effet d'image.

De quel code jQuery ou javascript ai-je besoin?

p.s. Comment puis-je poster correctement le code que j'ai maintenant? J'ai essayé de coller le code dans « Entrez le code ici, » mais des erreurs reçu

Answer 1

Ceci est assez simple si vous ajoutez rel="img-id" à chaque lien que vous voulez masquer ou afficher comme suit:

<div id="wrapper"> 

<div id="navigation"> 
    <a id="sun" href="#">sunimg</a> 
    <a id="plane" href="#">planeimg</a> 
    <a id="nano" href="#">nanoimg</a> 
</div> 
<div style="clear:both"></div> 

<div id="popuptext">1st: <a href="#" rel="sun">Sun</a> 
2nd: <a href="#" rel="plane">Airplane</a> 
3rd: <a href="#" rel="nano">Nano</a> 
</div> 

</div> 

Et puis mettez à jour votre fonction prête jQuery comme suit:

// target each link in the navigation div 
    $('#navigation a').click(function(e) { 
    // link that you clicked 
    clicked = $(this).attr('id'); 

    // this is faster than the .each() you used 
    $('#navigation a').removeClass('active'); 
    $(this).addClass('active'); 

    // hide all links, then show the one with the same rel as the id clicked 
    $('#popuptext a').hide(); 
    $('#popuptext a[rel='+clicked+']').show(); 

    // prevent the default link action 
    return false; 
    }); 
​