Как создать смену фонового изображения при click?

Question

[Moe Green]

Новичок в javascript.

Суть вопроса - реализовать смену фонового изображения в блоке при событии click. Структура элемента - реализация tabs на HTML&CSS&jQuery.

codepen.io/gearmobile/pen/xbJbpr

(пример не совсем рабочий на Codepen из-за проблем подключения jeet.gs, rupture и так далее - просьба не заострять на этом внимание; на локальном компе все работает).

Первую половину js-кода (реализация tabs) я позаимствовал на этом ресурсе, ибо своих мозгов пока не хватает в js.

Вторую половину (смена фонового изображения) состряпал сам. Но меня смущает топорная манера, в которой это выполнено (почти на 100% уверен в данном факте).

Подскажите более изящный способ реализации такой задачи. Плюс - хотелось бы с эффектом анимации при смене изображения.

И еще - может быть, имеется готовый плагин под jQuery для реализации смены фонового изображения при click? Самостоятельные посики ни к чему не привели - пришлось самому ваять строки.

Answer 1

[Макс Ларионов]

Просто почитай

css3.bradshawenterprises.com/cfimg

Answer 2

[lega]

Вот без JS (на Angular Light)
al-click="page='p1'" - при клике устанавливаем переменную.
al-css="active: page=='p1'" - Если page=='p1' добавляем класс active (для кнопок)
class="{{page}}" - подключаем класс из переменной

Answer 3

[Алим Алибаев]

Написать функцию, которая при клике будет менять строку url

$(function() {
  $('body').click(function() {
    $(this).css('background-image', 'url(images/имя.png)');
  });
});

Comments

[Moe Green]

да, код мне понятен. но вопрос только в том, что имеется три элемента a, при клике на каждом из них меняется фоновая картинка у соответсвующего этому элементу a блоку.