Как сохранить класс активной ссылки после перезагрузки страницы?

Question

[Yaroslav TheRock]

Всем привет.
Как реализовать выбор языка на сайте. Есть выпадающий список из языков. Как сделать, чтобы по клику ссылка с классом "active" сохранялась после перезагрузки страницы. Я понял, что нужно использовать localStorage.
Js код

$(".lang-switch a").click(function(e) {
	  $(".lang-switch a").removeClass('active');
	  $(this).addClass('active');
});

HTML

<div class="lang-switch" >
                                    <a lang="ru" class="translate translate-ru active" href="?lang=ru">Ru</a>
                                    <a lang="en" class="translate translate-en" href='?lang=en'>En</a>
 </div>

CSS

.lang-switch {
  position: relative;
  display: inline-block;
  line-height: 1; }

  .lang-switch .translate-item{
    list-style-type: none;
  }

.lang-switch .translate:not(.active) {
  position: absolute;
  top: 100%;
  z-index: 10;
  display: none; }

.lang-switch .translate {
  font-size: 0.75rem;
  color: #feffff;
  text-transform: uppercase;
  text-decoration: none;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  font-family: "AndaleMono";
  outline: 0; }

.lang-switch:hover .translate:not(.active) {
  display: block; }

Answer 1

[Larisa Moroz]

$(".lang-switch a").click(function(e) {
    $(".lang-switch a").removeClass('active');
    $(this).addClass('active');
    localStorage.lang = this.getAttribute('lang');
});

$(window).load(function() {
  var lang = localStorage.lang || 'ru';
  $('a[lang="'+lang+'"]').addClass('active');
}

Comments

[Yaroslav TheRock]

Спасибо! Простое решение. Ничего, если я оберну конструкцию в $(document).ready() вместо load() ? , т.к пункт меню поздно появляется .

[Larisa Moroz]

Да, $(document).ready() тоже подойдёт

Answer 2

[Николай]

Использовать куки (cookie), вот инфа как пример, в поисковике есть и получше ссылка

Answer 3

[Юрий Есин]

Можно сохранить параметр в куку, можно привязаться к хешу урла, после перезагрузки он никуда не исчезнет и можно будет проверить наличие:

var hash = window.location.hash;
var selectedOption = null;

if (hash && hash != '#') {
  var parts = hash.split('=');

  if (parts.length == 2 && parts[0] == "select_option") {
    selectedOption = parts[1];
  }
}

Дальше просто присвоить свойство selected селектору "select option[name='" + selectOption + "']" при загрузке страницы, а в onchange списка обновлять хэш. Не часто вижу чтобы подобное решение применялось, но иногда оно вписывается куда элегантнее и проще, чем даже те же куки, которые можно очистить и всё слетит, или вообще отключить. Хэши напоминают строку GET-запроса, только работают исключительно в рамках клиентсайда.

Эти два варианта подойдут для сугубо клиентской привязки. Можно еще и с помощью сервера организовать, сразу отдавать на клиент разметку с выделенным элементом списка в зависимости от параметра запроса или куки, или сессии, как угодно.

Вместо списков можно применить к любому элементу, достаточно лишь изменить селектор и вместо свойства selected использовать атрибут классов, к примеру. Всё от вашей фантазии зависит, решений здесь много.