在同一頁面上使用多個選項卡組件

Question

我正在嘗試實現選項卡的功能，但我遇到了一些問題。 我想對多個選項卡使用相同的 function 但如果我在同一頁面中有多個選項卡組件，則不會相互干擾。 您對我如何實現這一目標有任何想法嗎？ 非常感謝。 到目前為止，我只是設法避免 W3schools 示例中的內聯 javascript ，但它僅適用於一個組件。

<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 class

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