изменить фоновые изображения по клику в jquery

Question

Хорошо, у меня есть фрагмент вроде http://jsfiddle.net/8vFEd/. Я использую фоновые изображения, а не плоские поля фона. При щелчке любого прямоугольника щелкаемый прямоугольник должен изменить фоновое изображение, скажем (активное), а остальные - как (тусклый). После щелчка по второму прямоугольнику необходимо иметь (активное) заднее изображение, а остальное тусклое изображение. В основном я использую только 2 фоновых изображения jquery, и они меняют положение фона в зависимости от того, что нажимается. Может ли кто-нибудь помочь, как мне сделать это

Один будет активен, а остальные будут тусклыми при щелчке по данному прямоугольнику.

Answer 1

Я бы прокомментировал это сообщение Джозефа, но у меня еще нет этой привилегии, так что, эй.

Вероятно, стоит применить границу по умолчанию 2px solid #fff (где #fff - фонродитель) для всех ссылок, так что это всего лишь случай изменения цвета, что означает, что не будет проблем с перемещением ссылок вверх и вниз при нажатии (как вы можете видеть в его скрипке).

Для добавления / удаления изображений

$(".prop a").click(function() {
    // Give this the green background image
    $(this).css({ "border-color": "#f00", "background-image": "url('http://colourlovers.com.s3.amazonaws.com/images/patterns/113/113140.png')" })
    .parent().siblings().find('a')
    // Give all the others the red background image
    .css({ 'border-color': '#fff', 'background-image': "url('http://colourlovers.com.s3.amazonaws.com/images/patterns/155/155260.png')" });
});

Быстрое простое исправление, из его кода: http://jsfiddle.net/bwfFL/1/

Answer 2

Я предполагаю, что вы хотите изменить фоновые изображения (та же логика применяется к цвету фона).Допустим, у всех ваших прямоугольников есть класс «язык».

$(".language").click(function () {
   // Dim out all the rectangles
   $(".language").css("background-image", "url(/dim.jpg)");

   // Make currently clicked rectangle active
   $(this).css("background-image", "url(/active.jpg)");
});

Answer 3

Я не уверен, что полностью понимаю, чего вы пытаетесь достичь, но вы можете попробовать использовать это:

$(this).css("border","2px solid red")
       .parent().siblings().find('a')
       .css('border', 0);

http://jsfiddle.net/8vFEd/23/