Перемещение по пунктам при нажатие стрелочек?

Question

[Sergey750il]

Здравствуйте. Есть постраничная навигация (точнее не постраничная, а навигация по годам) как сделать так, что бы при нажатие на боковые стрелочки происходило перемещение между годами те должно быть переключение страницы и добавление соответствующему пункту класса active.

<div class="form-item">
<a href="#" class="str-l"></a>
<a href="http://site.local/events?field_years_tid=9" class="active">2014</a>
<a href="http://site.local/events?field_years_tid=10">2015</a>
<a href="http://site.local/events?field_years_tid=11">2017</a>
<a href="#" class="str-r"></a>
</div>

Comments

[make_luv]

Отлавливать события по коду кнопки и вешать на них переход. Мне так кажется.

[Sergey750il]

Я пробовал находить элемент с классом active и в в зависимости от того на какой стрелке происходил клик использовал next() или prev(), но у меня не получилось...

Answer 1

[Rsa97]

<div class="form-item">
<a href="http://site.local/events?field_years_tid=8">&lt;</a>
<a href="http://site.local/events?field_years_tid=9" class="active">2014</a>
<a href="http://site.local/events?field_years_tid=10">2015</a>
<a href="http://site.local/events?field_years_tid=11">2017</a>
<a href="http://site.local/events?field_years_tid=10">&gt;</a>
</div>

Comments

[Sergey750il]

Это зачем?

[Rsa97]

Судя по ссылкам вида "site.local/events?field_years_tid=9" jQuery при переключении по годам не используется, просто идёт переход на другую страницу. Или Вы хотели переключать какую-то другую страницу?

[Sergey750il]

При нажатие просто идет переход по годам.

[Rsa97]

Угу, а при нажатии на стрелку просто подсветка года должна смениться или должна загрузиться информация по этому году? Сайт ваш, похоже, про ajax-запросы ничего не знает и страница при нажатии на год перезагружается полностью, так? Значит, как только послан запрос на загрузку новой страницы старая с экрана стирается, зачем на ней что-то выделять?

Answer 2

[Владлен Грачев]

jQuery имеет методы prev() и next(). В зависимости от того, какую стрелочку нажали, надо использовать соответствующий метод.
Грубо говоря, что-то вроде следующего:

$('.form-item a.active').removeClass('active').next().addClass('active')

Это для обработки нажатия на правую стрелочку. Для левой, соответственно, prev() вместо next(). Еще добавить обработку нахождения в крайних положениях. Ну и приправить функциональностью и красивостями по вкусу.

Comments

[Sergey750il]

Я уже писал об этом комментируя ответ выше. Но попробую еще раз на свежую голову...

[Sergey750il]

Крайние положения - беда. Не могу придумать алгоритма.

[Sergey750il]

Воде сделал, но не происходит перемещения по страницам. Только меняется селектор.

[Владлен Грачев]

Sergey750il, ну так перемещение по страницам тоже надо прописывать. В вашем случае, насколько я понимаю, нужно получать адрес ссылки (attr('href')) и передавать его в качестве одного из параметров, например, в $.get().