1

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

<!--//Страница 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>

1 ответ 1

2

Можно к якорю вкладки привязать.
А ссылки делать вида: /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>

4
  • Просто переходя по ссылке проскроливает до якоря, но вкладку не открывает.
    – Dio
    22 апр 2020 в 15:58
  • 1
    Не открывает скорее всего из-за document.location.hash = "#tab-1";. Потому что должно быть document.location.hash = document.location.hash || "#tab-1"; 22 апр 2020 в 16:39
  • Но по хорошему, вам надо отслеживать значение hash в js и, если оно равно нудному, то открывать соответствующую вкладку. Будет больше гибкости и меньше проблем. 22 апр 2020 в 16:49
  • Всё равно не работает, это document.location.hash = document.location.hash || "#tab-1"; на странице со ссылками прописывать ? Сделал через localstorage, но в любом случае спасибо за помощь.
    – Dio
    22 апр 2020 в 16:54

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.