Как осуществить дополнительную навигацию по ТАБ на JS?

Question

Получилось реализовать ТАБы на чистом JS, однако, требуется дополнительная навигация по ТАБам из элементов LINK, как в примере ниже. Подскажите идеи, что упустил, пробовал разные варианты. На jQuery я бы реализовал, но пытаюсь на JS заставить это работать.

const tabLinks = document.querySelectorAll('.item'),
      tabContent = document.querySelectorAll('.panel'),
      tabActive = 'active';


[].forEach.call(tabLinks, (el) => {
  el.addEventListener('click', openTabs);
});


function openTabs(el) {
  let btnTarget = el.currentTarget,
    idTab = btnTarget.dataset.tab;

  [].forEach.call(tabContent, (el) => {
    el.classList.remove(tabActive);
  });

  [].forEach.call(tabLinks, (el) => {
    el.classList.remove(tabActive);
  });

  document.querySelector("#" + idTab).classList.add(tabActive);

  btnTarget.classList.add(tabActive);
}

.flex {
  width: 300px;
  padding-left: 0;
  display: flex;
  list-style: none;
  justify-content: space-between;
}

.item.active {
  color: red
}

.panel:not(.active) {
  display: none;
}

<ul class="flex">
  <li>LINK 1</li>
  <li>LINK 2</li>
  <li>LINK 3</li>
</ul>


<hr>
<br>
<br>

<div class="flex">
  <div class="item active" data-tab="tab-1">TAB item 1</div>
  <div class="item" data-tab="tab-2">TAB item 2</div>
  <div class="item" data-tab="tab-3">TAB item 3</div>
</div>

<hr>

<div class="panel active" id="tab-1">Tab content 1</div>
<div class="panel" id="tab-2">Tab content 2</div>
<div class="panel" id="tab-3">Tab content 3</div>

Answer 1

Если количество <li>, .item и .panel одинаково, то можно привести все коллекции этих элементов к массивам и управлять ими с помощью индексов:

const tabLi = [...document.querySelectorAll('li')],
  tabLinks = [...document.querySelectorAll('.item')],
  tabContent = [...document.querySelectorAll('.panel')],
  tabActive = 'active';

tabLinks.forEach((el, i) => {
  el.addEventListener('click', openTabs);
  tabLi[i].addEventListener('click', function() {
    tabLinks[tabLi.indexOf(this)].click();
  });
});

function openTabs(ev) {
  tabContent.forEach((el, i) => {
    el.classList.remove(tabActive);
    tabLi[i].classList.remove(tabActive);
    tabLinks[i].classList.remove(tabActive);
  });
  document.querySelector("#" + this.dataset.tab).classList.add(tabActive);
  this.classList.add(tabActive);
  tabLi[tabLinks.indexOf(this)].classList.add(tabActive);
}

.flex {
  width: 300px;
  padding-left: 0;
  display: flex;
  list-style: none;
  justify-content: space-between;
}

li.active,
.item.active {
  color: red
}

.panel:not(.active) {
  display: none;
}

<ul class="flex">
  <li class="active">LINK 1</li>
  <li>LINK 2</li>
  <li>LINK 3</li>
</ul>

<hr><br><br>

<div class="flex">
  <div data-tab="tab-1" class="item active">TAB item 1</div>
  <div data-tab="tab-2" class="item">TAB item 2</div>
  <div data-tab="tab-3" class="item">TAB item 3</div>
</div>

<hr>

<div id="tab-1" class="panel active">Tab content 1</div>
<div id="tab-2" class="panel">Tab content 2</div>
<div id="tab-3" class="panel">Tab content 3</div>

БЛОГ НА HUSL

Как осуществить дополнительную навигацию по ТАБ на JS?

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