Ванильный Javascript показать вкладку и скрыть другие

Question

сейчас я воссоздаю элемент Bootstrap "Toggleable / Dynamic Tabs" (вы можете найти его там - https://www.w3schools.com/bootstrap4/bootstrap_navs.asp), но я не могу запустить мой контент. "Вкладки" работают так, как задумано, но я не знаю, как заставить их отображать содержимое после нажатия, как я хотел. Я хочу, чтобы они отображали «связанный» элемент div при нажатии и скрывали элементы div, связанные с другими кнопками. Так же, как элемент начальной загрузки. Большое спасибо!

У меня есть что-то вроде этого: http://jsfiddle.net/Darlington/9kjst3rp/8

let tabs = Array.from(document.querySelectorAll('.subnavBtn'));

const handleClick = (e) => {
  e.preventDefault();
  tabs.forEach(node => {
    node.classList.remove('active-btn');
  });
  e.currentTarget.classList.add('active-btn');

}

tabs.forEach(node => {
  node.addEventListener('click', handleClick)
});

.subnavDiv {
  display: none;
}

.active {
  display: block;
}

.active-btn {
  background-color: red;
}

<nav class="subnav">
 <button class="subnavBtn">
   Button 1
 </button>

 <button class="subnavBtn">
   Button 2
 </button>

 <button class="subnavBtn">
   Button 3
 </button>
</nav>

<!-- DIVS I WANT TO SHOW -->

<div class="subnavDiv active">
Content 1
</div>

<div class="subnavDiv">
Content 2
</div>

<div class="subnavDiv">
Content 3
</div>

Answer 1

@ Maheer Ali ответит хорошо, вот альтернативный вариант использования атрибутов данных для указания, какая вкладка связана с каждой кнопкой:

const buttons = document.querySelectorAll('.subnavBtn');
const divs = document.querySelectorAll('.subnavDiv');

const handleClick = e => {
  e.preventDefault();
  
  // Buttons
  buttons.forEach(node => node.classList.remove('active-btn'));
  e.currentTarget.classList.add('active-btn');
  
  // Divs (tabs)
  divs.forEach(node => node.classList.remove('active'));
  [...divs].filter(div => div.dataset.tab === e.currentTarget.dataset.tab)[0].classList.add('active');
}

buttons.forEach(node => node.addEventListener('click', handleClick));

.subnavDiv { display: none; }
.active { display: block; }
.active-btn { background-color: red; }

<nav class="subnav">
 <button class="subnavBtn active-btn" data-tab="1">Button 1</button>
 <button class="subnavBtn" data-tab="2">Button 2</button>
 <button class="subnavBtn" data-tab="3">Button 3</button>
</nav>

<div class="subnavDiv active" data-tab="1">Content 1</div>
<div class="subnavDiv" data-tab="2">Content 2</div>
<div class="subnavDiv" data-tab="3">Content 3</div>

Answer 2

Вы можете сделать это в следующих шагах

• Хранить все элементы div (содержимое) в массиве в глобальной области видимости
• Передайте вторую переменную btn для handleClick
• В forEach() отправьте элемент текущего индекса на handleClick в качестве второго параметра
• Внутри handleClick удалить active класс из всех div
• Наконец добавьте класс active в btn (второй параметр функции)

let tabs = Array.from(document.querySelectorAll('.subnavBtn'));
let contents = Array.from(document.querySelectorAll('.subnavDiv'));


const handleClick = (e,btn) => {
  e.preventDefault();
  tabs.forEach(node => {
    node.classList.remove('active-btn');
  });
  e.currentTarget.classList.add('active-btn');
  contents.forEach(x => x.classList.remove('active'))
  btn.classList.add('active');

}

tabs.forEach((node,i) => {
  node.addEventListener('click',(e) => handleClick(e,contents[i]))
});

.subnavDiv {
  display: none;
}

.active {
  display: block;
}

.active-btn {
  background-color: red;
}

<nav class="subnav">
 <button class="subnavBtn">
   Button 1
 </button>

 <button class="subnavBtn">
   Button 2
 </button>

 <button class="subnavBtn">
   Button 3
 </button>
</nav>

<!-- DIVS I WANT TO SHOW -->

<div class="subnavDiv active">
Content 1
</div>

<div class="subnavDiv">
Content 2
</div>

<div class="subnavDiv">
Content 3
</div>