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

Question

我对所看到的图像创建了以下效果 here 。您会看到，当您将鼠标悬停并单击每个图像时，它们会从灰色变为彩色。当您单击其中一项时，其他项会变灰，而单击的项仍保持颜色。这很酷，但现在我需要文本 1st: Sun 及其图形按钮来显示和隐藏。 “Sun”这个词是一个需要链接到 URL 的链接，因此必须将其与图像效果代码分开。

我需要什么 jQuery 或 JavaScript 代码来执行此操作？

附:我如何正确发布我现在拥有的代码。我尝试将代码粘贴到“在此处输入代码”中，但收到错误

Answer 1

如果您将 rel="img-id" 添加到要隐藏或显示的每个链接，这相当简单，如下所示:

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

然后更新您准备好的函数 jQuery，如下所示:

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