JS При клике переключаться на следующий div

Например есть

1

2

3

4

Как правильно будет описана функция JS Чтобы получить следующий результат. При нажатии присваивается класс active к первому div , при повторном нажатии класс удаляется и присваивается к следующему диву. если нажать Назад , то действие идет в обратном порядке.

Ответ

На скорую руку
$(document).ready(function () { $('.next').on('click', function () { if ($('div.active').index() == -1) { $('.box div:first-child').addClass('active'); } else { $('div.active').next('div').addClass('active'); $('div.active').prev('div').removeClass('active'); } }); $('.prev').on('click', function () { if ($('div.active').index() == -1) { /* без действий */ } else { $('div.active').prev('div').addClass('active'); $('div.active').next('div').removeClass('active'); } }); }); .active{ background:#ccc; }

1

2

3

4