@VladKnx

HTML. Реализация перехода на нужный таб при нажатии на ссылку на одной странице?

Здравствуйте! Есть одностраничник. В верхней части есть 6 кнопок, каждой кнопке соответствует отдельный таб и его содержимое в нижней части страницы. Сейчас при нажатии на любую кнопку происходит прокрутка к якорю в нижней части, а затем табы нужно переключать вручную. Подскажите как сделать чтобы при нажатии на определенную кнопку открывался сразу нужный таб и содержимое.

Код кнопки:
<div class="button-wrapper">
   <a class="btn-solid-reg page-scroll" href="#features">MORE...</a>
</div>


Код переключателя табов:
<ul class="nav nav-tabs" id="argoTabs" role="tablist">
   <li class="nav-item">
   <a class="nav-link active" id="nav-tab-1" data-toggle="tab" href="#tab-1" role="tab" aria-controls="tab-1" aria-selected="false"><i class="fas fa-list"></i>EPC Auto Forge</a>
   </li>
   <li class="nav-item">
   <a class="nav-link" id="nav-tab-2" data-toggle="tab" href="#tab-2" role="tab" aria-controls="tab-2" aria-selected="false"><i class="fas fa-list"></i>All Data Online</a>
   </li>
   </li>
</ul>


Код содержимого табов:
<div class="tab-content" id="argoTabsContent">
   <div class="tab-pane fade show active" id="tab-1" role="tabpanel" aria-labelledby="tab-1">
       .......
   </div>
   <div class="tab-pane fade" id="tab-2" role="tabpanel" aria-labelledby="tab-2">
       .......
   </div>


Буду благодарен за помощь.
  • Вопрос задан
  • 96 просмотров
Пригласить эксперта
Ответы на вопрос 3
DanArst
@DanArst
Э, Ойboy!
Делал похожее. Скролл к якорю внутри таба, может поможет

Ответ написан
Stalker_RED
@Stalker_RED
слушайте событие hashchange и включайте нужный таб.

window.addEventListener('hashchange', function(evt) {
  const hash = location.hash;
  console.log('hash changed to', hash);
  // activateTab(hash) // эту функцию напишите сами, или может у вас во фреймворке уже есть что-то такое
});
Ответ написан
@VladKnx Автор вопроса
Всем спасибо, сделал через document.getElementById.click()
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы