kickflip2009
@kickflip2009

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

Всем привет.
Как реализовать выбор языка на сайте. Есть выпадающий список из языков. Как сделать, чтобы по клику ссылка с классом "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; }
  • Вопрос задан
  • 1313 просмотров
Решения вопроса 1
larisamoroz
@larisamoroz
Курю маны, втыкаю в код, ваяю, починяю.
$(".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');
}
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
nickolyashka
@nickolyashka
Использовать куки (cookie), вот инфа как пример, в поисковике есть и получше ссылка
Ответ написан
Exomode
@Exomode
Архитектор ПО
Можно сохранить параметр в куку, можно привязаться к хешу урла, после перезагрузки он никуда не исчезнет и можно будет проверить наличие:
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 использовать атрибут классов, к примеру. Всё от вашей фантазии зависит, решений здесь много.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы