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

Question

Есть две страницы одного сайта. На одной находятся ссылки, на другой таб-меню. Как сделать что бы при переходе по ссылке на другой странице делался клик по соответствующему ей табу?

<!--//Страница 1//--> <br>

<a href="services-details.html" class="serviceBtn" id="btn1">Подробнее</a>
<a href="services-details.html" class="serviceBtn" id="btn2">Подробнее</a>
<a href="services-details.html" class="serviceBtn" id="btn3">Подробнее</a>

<br>
<!--//Страница 2//-->  
<ul>
  <li class="tabItem tabItem-active" data-tab-name="tab-1">Tab1</li>
  <li class="tabItem" data-tab-name="tab-2">Tab2</li>
  <li class="tabItem" data-tab-name="tab-3">Tab3</li>
</ul>

<ul>
  <li class="tabsContent tab-1 tabsContent-active">1</li>
  <li class="tabsContent tab-2">2</li>
  <li class="tabsContent tab-3">3</li>
</ul>

Answer 1

Можно к якорю вкладки привязать.
А ссылки делать вида: /my-site#tab-1, /my-site#tab-2, /my-site#tab-3.

document.location.hash = document.location.hash || "#tab-1";

.content:target {
  display: block;
}

.content {
  display: none;
  border: 1px solid tomato;
}

.tabs {
  width: 500px;
  margin: 40px auto;
  
  font-family: roboto, sans-serif;
}

a.tab {
  padding: 8px 20px;
  border-radius: 5px 5px 0 0;
  background-color: tomato;
  display: inline-block;
  color: white;
}

<div>
  <p>ссылки с другой страницы</p>
  <a href="/js#tab-1">сслылка 1</a>
  <a href="/js#tab-2">сслылка 2</a>
  <a href="/js#tab-3">сслылка 3</a>
</div>

<div class="tabs">
    <a href="#tab-1" class="tab">Вкладка 1</a>
    <a href="#tab-2" class="tab">Вкладка 2</a>
    <a href="#tab-3" class="tab">Вкладка 3</a>
  
    <div id="tab-1" class="content default">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ratione, maxime.</div>
    <div id="tab-2" class="content">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cupiditate tempora beatae mollitia. Quaerat, quidem.</div>
    <div id="tab-3" class="content">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quo vero repellat labore ab. Iusto, modi aliquam perferendis dignissimos deserunt mollitia.</div>
</div>

БЛОГ НА HUSL

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

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