单击图像时显示文本/单击不同图像时隐藏文本

Question

I have created the following effects on the images seen here . You see when you hover and then click on each image, they go from grey to color. When you click on one - the others go grey and the one clicked remains color. That's cool, but now I need the text 1st: Sun for example to display and hide along with its graphic button. The word "Sun," is a link that needs to link out to a URL so it has to be separated from the image effect code.

What jQuery or javascript code do I need to do this?

ps How do I properly post the code I have now. I tried to paste code in "enter code here," but received errors

Answer 1

This is fairly simple if you add rel="img-id" to each link you want to hide or show as follows:

<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> 

And then update your ready function jQuery as follows:

  // 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;
  });
​