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

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

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

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

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

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

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

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

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

6 комментариев

  • Артур
    Артур
    11/03/2020, 13:03
    Можете дать подобное решение по переключению вкладок, по средствам произвольных utm меток?
    • Furry_web
      Furry_web
      16/03/2020, 17:37
      В принципе логика алгоритма остается прежней, меняются только методы. Вместо хеша извлекаем из урла поисковые параметры (document.location.search) Чтобы не парсить самостоятельно, используем URL API ```const params = new URL(document.location).searchParams // Объект URLSearchParams const city = params.get('utm_city') // получаем нужный параметр``` Записать в урл новое значение: ```params.set('utm_city', 'Moscow') // перезапишет текущее значение, если есть const search = params.toString() // параметры в виде строки, которую можно подставить в урл const newLocation = document.location.origin +document.location.pathname + '?' + search```
  • Артур
    Артур
    11/03/2020, 09:45
    Извиняюсь, это я криво стили прописал и из за этого конфликты были. Скрипт классный. Только у вас нашел. Продолжайте и дальше действительно полезный контент делать. Спасибо. Я мультилендинг с его помощью собираю.
  • Артур
    Артур
    5/03/2020, 11:35
    Скрипт хороший, только он перестает корректно работать если есть ещё скрипты с участием хеша. Можно ли его как то докрутить?
    • Furry_web
      Furry_web
      6/03/2020, 13:02
      Какие скрипты, например?

Оставить комментарий

*Доступные HTML-теги: a, abbr, blockquote, code, pre, del, i, em, strong, b, strike
*Не будет опубликован