有人可以解释一下这个 Javascript 标签代码

如何解决有人可以解释一下这个 Javascript 标签代码

从HERE复制并由我修改

我知道一些代码在做什么，但不是全部（我认为箭头函数和循环让我感到困惑），因为我仍然是 Javascript 的菜鸟

实际上我想简化这段代码，以便它主要中继 indexOf 函数（而不是任何硬编码的 html代码）如：

• onClick of :nth number of child of .tab-stripe

  • 移除 of active
  • 移除 of .tab-stripe
  • 在 点击的孩子
  上添加active类
  • 在第n个孩子 of .tab-contents
  上添加active类

• 还根据来自 active

  的孩子的 ID 的 #url 参数设置标签处于活动状态

.tab-contents

但是因为我无法理解这一点，所以我不能那样做

我的问题

Q1：数组中是否需要 .tab-contents
Q2：整个代码中的<div class="tab-contents"> <div id="Tab1" class="tab-content">Lorem ipsum</div> https://example.com/#Tab1 <div id="Tab2" class="tab-content">Lorem ipsum</div> https://example.com/#Tab2 </div> 实际上是什么以及为什么它的值为负
Q3：这里发生了什么...
Q4：为什么current_tab_index写成=== -1 ? 0 :&i的值是什么，因为它的参数forEach((x,i)被写了这么多次
Q5：i

的值是/将是什么？

(index)

x

function tabify(element) {
    const stripe = element.querySelector(".tabs-stripe");
    const content = element.querySelector(".tabs-content");
    const tab_stripes = [...stripe.children]; //Q1
    const tab_contents = [...content.children];
    let current_tab_index = -1; //Q2

    function setTab(index) {
        if (current_tab_index > -1) {
            tab_stripes[current_tab_index].classList.remove("active");
            tab_contents[current_tab_index].classList.remove("active");
        }

        tab_stripes[index].classList.add("active");
        tab_contents[index].classList.add("active");
        current_tab_index = index;
    }

    default_tab_index = tab_stripes.findIndex((x) => {
        return [...x.classList].indexOf("active") > -1;
    });

    default_tab_index = default_tab_index === -1 ? 0 : default_tab_index; //Q3
    setTab(default_tab_index);
    tab_stripes.forEach((x,i) => (x.onclick = (event) => setTab(i))); //Q4
}

// this is where the magic happens!
[...document.querySelectorAll(".tabs-container")].forEach((x) => tabify(x)); //Q5