点击列表项时切换active与underline类的JS问题求助

问题说明 #

点击列表项时，需要移除所有列表项的active类及其子元素的underline类，仅给当前点击的列表项添加active类，其子元素添加underline类。原有代码仅能移除第一个元素的对应类，点击过的项会保留类，无法实现仅当前项激活的效果。

修正后的代码 #

HTML（无需修改）

<ul class="ulmargin">
    <li class="active"><a class="underline" href="#">Home</a></li>
    <li><a href="#divabout">About</a></li>
    <li><a href="#divservices">Services</a></li>
    <li><a href="#divskills">Skills</a></li>
    <li><a href="#diveducation">Education</a></li>
    <li><a href="#divexperience">Experience</a></li>
    <li><a href="#divwork">Work</a></li>
    <li><a href="#divblog">Blog</a></li>
    <li><a href="#divcontact">Contact</a></li>
</ul>

JavaScript

function sectclick(){
    let sections = document.querySelectorAll(".ulmargin li");
    sections.forEach(section => {
        section.addEventListener("click", function() {
            // 先移除所有列表项的激活类
            sections.forEach(item => {
                item.classList.remove("active");
                item.children[0].classList.remove("underline");
            });
            // 给当前点击的列表项添加激活类
            this.classList.add("active");
            this.children[0].classList.add("underline");
        });
    });
}

修正要点 #

• 去掉了原代码中错误的if(i != 0)判断——点击第一个列表项（Home）时也需要重置状态。
• 点击事件触发时，先遍历所有列表项，统一移除active和underline类，确保之前点击过的项都恢复默认状态。
• 使用forEach替代传统for循环，代码更简洁易读（新手也能快速理解）。
• 用this指代当前点击的列表项，无需依赖循环索引i，避免索引绑定问题。

内容的提问来源于stack exchange，提问作者Sarah