Question

我在here图片上创建了以下效果。你看到当你悬停然后点击每个图像时，它们会从灰色变为彩色。当你点击一个 - 其他人变成灰色，点击的一个仍然是颜色。这很酷，但现在我需要第一个文本：Sun，例如显示和隐藏它的图形按钮。 “Sun”这个词是一个需要链接到URL的链接，因此它必须与图像效果代码分开。

我需要执行哪些jQuery或javascript代码？

P.S。我如何正确发布我现在的代码。我尝试将代码粘贴到“输入代码”，但收到错误

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>

然后按如下方式更新你的ready函数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;
  });

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

1 个答案: