использовать компонент с несколькими вкладками на одной странице

Question

Я пытаюсь добиться функциональности вкладок, и я на чем-то застрял. Я хочу использовать одну и ту же функцию для нескольких вкладок, но не мешать друг другу, если у меня есть несколько компонентов вкладок на одной странице. у вас есть идеи, как я могу этого добиться? большое спасибо. до сих пор мне просто удается избежать встроенного javascript из примера W3schools, но он работает только для одного компонента.

<div class="first-tab-component>
 <div class="tab">
  <button class="tablinks" data-id="1">London</button>
  <button class="tablinks" data-id="2">Paris</button>
  <button class="tablinks" data-id="3">Tokyo</button>
</div>

<div data-id="1" class="tabcontent">
  <h3>London</h3>
  <p>London is the capital city of England.</p>
</div>

<div data-id="2" class="tabcontent">
  <h3>Paris</h3>
  <p>Paris is the capital of France.</p>
</div>

<div data-id="3" class="tabcontent">
  <h3>Tokyo</h3>
  <p>Tokyo is the capital of Japan.</p>
</div>
</div>

<div class="second-tab-component>
 <div class="tab">
  <button class="tablinks" data-id="1">London</button>
  <button class="tablinks" data-id="2">Paris</button>
  <button class="tablinks" data-id="3">Tokyo</button>
</div>

<div data-id="1" class="tabcontent">
  <h3>London</h3>
  <p>London is the capital city of England.</p>
</div>

<div data-id="2" class="tabcontent">
  <h3>Paris</h3>
  <p>Paris is the capital of France.</p>
</div>

<div data-id="3" class="tabcontent">
  <h3>Tokyo</h3>
  <p>Tokyo is the capital of Japan.</p>
</div>
</div>


let handleClick = e => {
  Array.from(document.querySelectorAll(".active"), e => e.classList.remove("active")); // remove `active` class from every elements which contains him.
  e.target.classList.add("active");
  document.querySelector(`div.tabcontent[data-id*="${e.target.dataset.id}"]`).classList.add("active");
};

Array.from(document.getElementsByClassName("tablinks"), btn => btn.addEventListener('click', handleClick, false));

здесь у меня есть пример https://jsfiddle.net/xn3yd852/

Answer 1

Вы можете заменить:

Array.from(document.querySelectorAll(".active"), e => e.classList.remove("active")); // remove `active` class from every elements which contains him.

на

Array.from(e.target.parentElement.parentElement.querySelectorAll(".active"), e => e.classList.remove("active")) 

Это удалит только класс .active из его родительского компонента вкладки

https://jsfiddle.net/Buntel/2rmuk03c/6/