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

Иногда необходимо, чтобы при открытии страницы с табами отображалась конкретная вкладка, а не та, которая активна по умолчанию.

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

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

Итак, что у нас есть?

Верстка

Страница с тремя вкладками-табами.

<div class="container">
  <div class="banner">
    <img id="banner__img" src="" alt="" width="100%" height="300">
  </div>
  <div class="tabs">
    <div class="tab" data-name="one">Первая вкладка</div>
    <div class="tab" data-name="two">Вторая вкладка</div>
    <div class="tab" data-name="three">Третья вкладка</div>
  </div>
  <div class="content">
    <div class="page page_one">Содержимое первой вкладки</div>
    <div class="page page_two">Содержимое второй вкладки</div>
    <div class="page page_three">Содержимое третьей вкладки</div>
  </div>
</div>

Для каждого таба подгружается своя картинка и открывается нужный блок с контентом.

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

Табы

Код самих табов:

$(document).ready(function(){

  let tabs = $('.tab'); // все табы
  let pages = $('.page'); // блоки с контентом для всех табов
  let banner = $('#banner__img'); // изображение

  // при клике на таб вызываем tabActivate с именем таба  
  $('.tab').click(function(){
    tabActivate($(this).data('name'));
  });

  
  // сразу активируем таб 'one'
  tabActivate('one');

  function tabActivate(name) {

    //подгружаем нужную картинку
    banner.attr('src',"img/"+name+".jpg");

    // активируем нужный таб и дезактивируем остальные
    tabs.each(function(ind, tab){
      if($(tab).data('name') == name){
        $(tab).addClass('active');
      }else{
        $(tab).removeClass('active');
      }
    });

    //открываем нужную вкладку и закрываем остальные
    pages.each(function(ind, page){
      $(page).hide();
    });
    $('.page_'+name).show();
  }
})

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

Активация нужного таба

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

Алгоритм таков:

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

Обновленный скрипт:

// 1 - читаем хеш
let hash = document.location.hash;

$(document).ready(function(){
  let tabs = $('.tab');
  let pages = $('.page');
  let banner = $('#banner__img');
  
  // 2 - активируем таб
  if (hash) {
    let name = hash.slice(1);
    tabActivate(name);
  }else{
    tabActivate('one');
  }

  $('.tab').click(function(){
    tabActivate($(this).data('name'));
  })

  function tabActivate(name){
    banner.attr('src',"img/"+name+".jpg");
    tabs.each(function(ind, tab){
      if($(tab).data('name') == name){
        $(tab).addClass('active');
      }else{
        $(tab).removeClass('active');
      }
    });
    pages.each(function(ind, page){
      $(page).hide();
    });
    $('.page_'+name).show();

    // 3 - обновляем хеш
    document.location.hash = '#'+name;
  }
})

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