1

Получилось реализовать ТАБы на чистом 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>

1 ответ 1

2

Если количество <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>

1
  • 2
    ой-вэй, точно, почему я до этого не додумался, я же изучал ... и массивы месяц назад. Искренне благодарю добрый человек!
    – Aleksandr
    9 ноя 2021 в 10:20

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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