在同一页面上使用多个选项卡组件

Question

我正在尝试实现选项卡的功能，但我遇到了问题。我想对多个选项卡使用相同的功能，但如果我在同一页面中有多个选项卡组件，则不会相互干扰。你对我如何实现这一目标有什么想法吗？非常感谢。到目前为止，我只是设法避免了 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/

在同一页面上使用多个选项卡组件

use multiple tabs component on the same page

javascript

css

tabs