Javascript 如何向循环元素添加动态类？

我有一个项目，其中页面有多个部分具有

data nav

属性，如下所示：

<section id="section1" data-nav="Section 1" class="">
      <div class="landing__container">
        <h2>Section 1</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fermentum metus faucibus lectus pharetra dapibus. Suspendisse potenti. Aenean aliquam elementum mi, ac euismod augue.</p>

        <p>Aliquam a convallis justo. Vivamus venenatis, erat eget pulvinar gravida, </p>
      </div>
    </section>
    <section id="section2" data-nav="Section 2">
      <div class="landing__container">
        <h2>Section 2</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fermentum metus faucibus lectus pharetra dapibus. Suspendisse potenti. Aenean aliquam elementum mi, ac euismod augue. Donec eget lacinia ex. Phasellus imperdiet porta orci eget mollis. Sed convallis sollicitudin mauris ac tincidunt..</p>

        <p>Aliquam a convallis justo. Vivamus venenatis, erat eget pulvinar gravida, ipsum lacus aliquet velit, vel luctus diam ipsum a diam. Cras eu tincidunt arcu, vitae rhoncus purus.</p>
      </div>
    </section>

对于滚动部分，我在click事件侦听器中使用for循环来检查单击了哪个部分并滚动到它：

navList.addEventListener('click', (evt)=>{
    sectionAnchor = evt.target.textContent;
    
    sectionArray.forEach(section => {
        if(sectionAnchor === section.dataset.nav){
            section.scrollIntoView();
        };
    });
});

---

现在，我被困在如何在单击导航栏时将活动类动态添加到导航栏中。

您可以尝试将其添加到代码中：

navList.querySelectorAll('a').forEach(el => { // it will select all the <a> element on the navList
  el.classList.remove('active'); // it will remove the active class from all of them
})
evt.target.classList.add("active") // it will add the active class just on the clicked <a> element

---

您可以尝试将以下内容添加到代码中：

navList.querySelectorAll('a').forEach(el => { // it will select all the <a> element on the navList
  el.classList.remove('active'); // it will remove the active class from all of them
})
evt.target.classList.add("active") // it will add the active class just on the clicked <a> element

navList.addEventListener('click', (evt)=>{
    sectionAnchor = evt.target.textContent;

    navList.querySelectorAll('a').forEach(el => { 
      el.classList.remove('active'); 
    })
    evt.target.classList.add("active") 

    sectionArray.forEach(section => {
        if(sectionAnchor === section.dataset.nav){
            section.scrollIntoView();
        };
    });
});