Question

我正在尝试用户点击此处显示的图片之一

http://techavid.com/design/test.html

背景中的图像只是关注的事物。所有图标都会显示为灰色，直到用户点击，并且只有在显示图标的彩色版本时才会显示。当鼠标悬停未激活时，目前每个图标的彩色图像显示在灰色版本后面。

可以这样做吗？

谢谢你，保罗

Answer 1

请发布适用于此问题的代码。这样，这里的人们可以更快更好地做出响应，而无需深入挖掘您的网站以找出相关内容。

无论如何，这里有一个简单的替代方案：

<强> HTML

<div id="navigation">
  <a id="foo" href="#">&nbsp;</a>
  <a id="bar" href="#">&nbsp;</a>
  <a id="baz" href="#">&nbsp;</a>
</div>

<强> CSS

a#foo {
  background: url('foo-inactive.png') no-repeat;
}

a#foo:hover,
a#foo.active {
  background: url('foo-active.png') no-repeat;
}

这会为您提供悬停效果。为其他id做同样的事情。添加一些填充，以使链接足够宽，以在后台显示图像。或者使用display="block"和width / height属性。

现在当有人点击图片时，请为其提供active类，查看CSS，与:hover效果相同。如果点击图片会将您带到另一个页面，只需将其添加到HTML（<a id="foo" class="active"...）中，如果您停留在同一页面上，请执行以下操作：

<强>的jQuery

$(document).ready(function() {

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

    // make sure that all the others are not active
    // except for the clicked one
    $('#navigation a').each(function() {
      if ($(this).attr('id') == clicked) {
        $(this).addClass('active');
      } else {
        $(this).removeClass('active');
      }
    });

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

});

带有不同图像的CSS / Jquery选项卡

1 个答案: