javascript - 如何从我点击的元素中选择内容(使用数据属性)

Question

我正在使用 HTML 和 JS，我正在尝试添加一个点击事件监听器，以便 index = 0 值在点击时自动更新。

根据我单击的 .tab 元素，div.tab 中的内容应该更改为显示 Hello1、Hello2 或 Hello3。 第一个选项卡应相应地显示选项卡内容 hello1。

我在 HTML 中提供了数据属性。如果两者具有与vanilla JS相同的数据属性，我希望输出相应的div.tab内容。

JS

const tabbarContent = document.querySelectorAll(".tab-content");
const tabbarButtons = document.querySelectorAll(".tab");
const index = 0;
tabbarContent[index].classList.add('active');
tabbarButtons[index].classList.add('active');
const dataAttribute1 = tabbarButtons[index].getAttribute("data-tab");
const dataAttribute2 = tabbarContent[index].getAttribute("data-tab");



function clickTab() {
  for (let index = 0; index.length; index++) {
    if (dataAttribute1[index] === dataAttribute2[index]) {
      dataAttribute2.classList.add("active");
    }
  }
}

tabbarButtons[index].addEventListener("click", clickTab);

HTML

<div class="container">
  <div class="inner-container">
    <div class="tab tab1" data-tab="1">
      1
    </div>
    <div class="tab tab2" data-tab="2">
      2
    </div>
    <div class="tab tab3" data-tab="3">
      3
    </div>
  </div>
  <div class="inner-container">
    <div class="tab-content content1" data-tab="1">
      <h1>Hello1</h1>
    </div>
    <div class="tab-content content2" data-tab="2">
      <h1>Hello2</h1>
    </div>
    <div class="tab-content content3" data-tab="3">
      <h1>Hello3</h1>
    </div>
  </div>
</div>

谢谢 杰西

Answer 1

如果我理解正确你想要实现什么，你可以这样做:

const tabbarButtons = document.querySelectorAll(".tab");
const tabbarContents = document.querySelectorAll(".tab-content");

tabbarButtons.forEach((tabBtn) => {
  tabBtn.addEventListener('click', () => {
    tabbarContents.forEach(tabCnt => {
      if (tabCnt.dataset.tab === tabBtn.dataset.tab) {
        tabCnt.classList.add('active');
      } else {
        tabCnt.classList.remove('active');
      }
    })
  });
})

.tab {
  display: inline-block;
  padding: 5px;
  border: 1px solid #ccc;
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

<div class="container">
  <div class="inner-container">
    <div class="tab tab1" data-tab="1">
      1
    </div>
    <div class="tab tab2" data-tab="2">
      2
    </div>
    <div class="tab tab3" data-tab="3">
      3
    </div>
  </div>
  <div class="inner-container">
    <div class="tab-content content1" data-tab="1">
      <h1>Hello1</h1>
    </div>
    <div class="tab-content content2" data-tab="2">
      <h1>Hello2</h1>
    </div>
    <div class="tab-content content3" data-tab="3">
      <h1>Hello3</h1>
    </div>
  </div>
</div>