При клике на ссылку и переходе на другую страницу, переходить на нужную вкладку (tabs)

Question

Есть скрипт вкладок (табов), приведу его ниже. Переходы по вкладкам работают при помощи onclick="". Подскажите, как сделать, что бы при клике по ссылке на любой странице сайта (на страницу с нашими табами) автоматически открывалась, например третья вкладка? У меня есть кнопка внутри первого таба, она работает, переключает, но не понимаю как быть, когда кнопка находиться на другой странице сайта.

function openCity(evt, cityName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].classList.remove("active");
  }
  document.getElementById(cityName).style.display = "block";
  document.getElementById(cityName + "-tab").classList.add("active");
  // evt.currentTarget.className += " active";
}

// Get the element with id="defaultOpen" and click on it
document.getElementById("London-tab").click();

body {
  font-family: Arial;
}


/* Style the tab */

.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}


/* Style the buttons inside the tab */

.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}


/* Change background color of buttons on hover */

.tab button:hover {
  background-color: #ddd;
}


/* Create an active/current tablink class */

.tab button.active {
  background-color: #ccc;
}


/* Style the tab content */

.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

<div class="tab">
  <button id="London-tab" class="tablinks" onclick="openCity(event, 'London')">London</button>
  <button id="Paris-tab" class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
  <button id="Tokyo-tab" class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>
</div>

<div id="London" class="tabcontent">
  <h3>London</h3>
  <p>London is the capital city of England.</p>
  <button class="new-btn" onclick="openCity(event, 'Tokyo')">Click Me</button>
</div>

<div id="Paris" class="tabcontent">
  <h3>Paris</h3>
  <p>Paris is the capital of France.</p>
</div>

<div id="Tokyo" class="tabcontent">
  <h3>Tokyo</h3>
  <p>Tokyo is the capital of Japan.</p>
</div>

Answer 1

Вот простейший вариант табов на чистом CSS.
Такой вариант как раз будет открывать нужный таб на другой странице при переходе туда, читая хеш в url. Нужно лишь к ссылке на новую страницу добавить id нужного таба.

.tabs {
  display: flex;
  flex-direction: column;
}

.tabs-links {
  display: flex;
  flex-direction: row;
  order: 0;
  white-space: nowrap;
  margin-bottom: 15px;
}

.tabs-links>a {
  display: inline-block;
  text-decoration: none;
  color: #222;
  padding: 5px 10px;
  text-align: center;
}

.tabs-links>a:hover {
  background-color: #eee;
}

.tabs>#tab-1:target~.tabs-links>a[href="#tab-1"],
.tabs>#tab-2:target~.tabs-links>a[href="#tab-2"],
.tabs>#tab-3:target~.tabs-links>a[href="#tab-3"] {
  background-color: #eee;
  cursor: default;
}

.tabs>div:not(.tabs-links) {
  display: none;
  order: 1;
  flex-grow: 1;
}

.tabs>div:target {
  display: block;
}

<div class="tabs">
  <div id="tab-1">
    Первый таб.
  </div>
  <div id="tab-2">
    Второй таб..
  </div>
  <div id="tab-3">
    Третий таб...
  </div>

  <div class="tabs-links">
    <a href="#tab-1">Таб 1</a>
    <a href="#tab-2">Таб 2</a>
    <a href="#tab-3">Таб 3</a>
  </div>
</div>

Answer 2

Предположим, что есть функция, которая меняет по клику видимость вкладок, делает одну вкладку активной, а содержание других скрывает - activateTab(). Эта функция принимает один параметр - id или name этой вкладки. Тогда url на страницу с одновременной активацией одной из вкладок должен иметь вид: somesite.ru/somepage#sometabname. При загрузке структуры страницы этот хэш (#sometabname) будет считан и преобразован в sometabname. После будет запущена функция activateTab('sometabname'), которая внутри проделает работу, аналогичную той, что сейчас меняет активность вкладок при нажатии на "корешок". Если хэша нет, то ничего не изменится.

document.addEventListener('DOMContentLoaded', () => {
    let hash = window.location.hash.substring(1);
    if(hash){
        activateTab(hash);
    }
})

БЛОГ НА HUSL

При клике на ссылку и переходе на другую страницу, переходить на нужную вкладку (tabs)

Ответы (2 шт):