Открытие таба по хешу адресной строки | В паутине

Открытие таба по хешу адресной строки

Иногда необходимо, чтобы при открытии страницы с табами отображалась конкретная вкладка, а не та, которая активна по умолчанию.
Чтобы это реализовать на JavaScript, можно воспользоваться хешами и свойством window.location.hash, которое возвращает хеш-часть адреса страницы.

Пример простой странички с реализованным механизмом открытия табов здесь.

Итак, что у нас есть?
Страница с тремя вкладками-табами.

Для каждого таба подгружается своя картинка и открывается нужная вкладка.
В качестве идентификатора таба используем data-атрибуты со значениями ‘one’, ‘two’, ‘three’.

По умолчанию при переходе на страницу открывается первая вкладка.

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

Алгоритм таков:
1. При загрузке страницы читаем хеш из адресной строки.
2. Если он есть, активизируем нужный слайд, если нет, активизируем первый слайд.
3. При клике на слайд, кроме открытия нужной вкладки добавляем к адресу странички хеш.

Новый скрипт:

Посмотреть, как это работает, можно здесь.

Комментарии (0)

Ваш email не будет опубликован. Все поля обязательны