如何在Vanilla JS中仅使用索引来定位选项卡组件

问题描述

我正在尝试使用香草js定位具有活动类的选项卡内容面板，我认为我可以定位单击部分的索引。我认为应该在库德彭的第19行添加活动类。 codpen exaple

<div class="hash-tabs-container">
  <div>
    <ol id="hash-tabs" class="hash-tabs tabs" tabs-id="popAll">
      <li><a href="#">Local authority</a></li>
      <li><a href="#">Health board</a></li>
    </ol>
    <ol
      id="hash-tab-content"
      class="hash-tab-content tab-content float graph-tabs"
      tabs-id="popAll"
    >
      <li class="tab-panel">
        <ol>
          <li>One</li>
          <li>Two</li>
          <li>Three</li>
        </ol>
      </li>
      <li class="tab-panel">
        <ol>
          <li>Four</li>
          <li>Five</li>
          <li>Six</li>
        </ol>
      </li>
    </ol>
  </div>
</div>

const containers = document.querySelectorAll(".hash-tabs-container");

  containers.forEach((container,index) => {
    let tabs = [].slice.call(container.querySelectorAll("#hash-tabs > li"));
    let sections = [].slice.call(
      container.querySelectorAll("#hash-tab-content > li")
    );

    const handleClick = (e) => {
      e.preventDefault();
      // tabs
      tabs.forEach((tab,index) => {
        tab.classList.remove("active");
      });
      e.currentTarget.classList.add("active");

      sections.forEach((section,i) => {
        section.classList.remove("active");
        // sections[i].classList.add("active");
      });
    };

    tabs.forEach((tab,index) =>
      tab.addEventListener("click",handleClick)
    );

    tabs[0].classList.add("active");
    sections[0].classList.add("active");

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）