При перезагрузке страницы теряется привязанный active класс, как можно сохранить?

Question

[Designer5455]

Привязка класса работает, но при перезагрузке удаляется. Подскажите пожалуйста, возможно мне нужно еще какой-то код добавить. Буду очень благодарен!


https://rizvontur.uz/alure-192/# - здесь можно увидеть

jQuery(function($){
		
$(function() {
  $(".image-menu-boats").click(function() {
      // remove classes from all
      $(".image-menu-boats").removeClass("menu-boats-active");//
      // add class to the one we clicked
     $(this).addClass("menu-boats-active");
 });
});
	
});

Comments

[Вадим]

Вам нужно как-то идентифицировать уникально каждую картинку.
Вариант по хуже - использовать индексы.

Ну а дальше при клике, после добавления класса сохранять в sessionStorag или localStorag идентификатор картинки, по которой кликнули.

При загрузке страницы проверять значение в стораже и добавлять картинке с указанным идентификатором активный класс.

https://learn.javascript.ru/localstorage

[Алексей Уколов]

Вадим, куда лучше сохранять значение в URL, а не в storage.

[Вадим]

Алексей Уколов, ну на счёт прям "лучше" - я бы сказал ситуативно. А так да, как альтернативный вариант - отличный.

[ProjectSoft]

А какая разница, по какой картинке кликнул? Контент не меняется вовсе.
Клик по картинке --> привязали класс --> показали то, что должно относится к этой картинке.
В ситуации, которая сейчас, весь код бессмыслен. Мб недолжно перезагружаться или может быть что-то должно вернуться другое с сервера?
Если первое - то просто не отправлять на перезагрузку.
Если второе, то тут уже проще. Вы в куках пишете привязку -> на беке читаете куку -> если есть -> ставим класс для нужной, если нет -> выделяем первую картинку. Либо передаёте параметр в url для загружаемой страницы и уже по параметру определяете, что должно быть выделено. И второй случай весь решается на стороне бека.
Если у вас это просто показ шаблона страницы, то самое лучшее это первый вариант.