CSS / Jquery вкладки с разными изображениями

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

Это дает вам эффект наведения. Сделайте то же самое для других идентификаторов. Добавьте отступы, чтобы ссылка была достаточно широкой, чтобы изображение отображалось на заднем плане. Или используйте атрибуты 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;
  });

});