添加/删除活动类JavaScript

我的解决方案。没有工作。我不知道为什么：(

document.addEventListener（“DOMContentLoaded”，function（））
{
//让标题=document.querySelector（“.nav”）；
let active=document.queryselectoral（“.nave”）；
for（设i=0；i

使用

forEach

和

querySelectorAll

。请参阅重新构造的示例：

document.addEventListener（“DOMContentLoaded”，function（））{
document.queryselectoral（“.nav el”）.forEach（函数（el）{
el.addEventListener（“单击”，函数（）{
移除类（）；
这个.classList.add（“导航激活”）；
});
});
});
函数removeClasses（）{
document.queryselectoral（“.nav el active”）.forEach（函数（el）{
el.classList.remove（“主动导航”）；
});
}

正文{
背景：#fff；
保证金：0；
}
.导航{
列表样式：无；
填充：0；
利润率：10px；
显示器：flex；
证明内容：中心；
}
.肚脐{
背景：rgba（231,29,54,1）；
盒影：0 5px 5px-3pxRGBA（231,29,54,0.3）；
右边距：1px；
柔性生长：1；
过渡：0.5s背景色；
显示器：flex；
位置：相对位置；
}
.肚脐：第一个孩子{
边界半径：5px 0 5px；
}
.肚脐：最后一个孩子{
边界半径：0 5px 5px 0；
}
.导航链路{
填充：2rem；
显示：块；
显示器：flex；
柔性生长：1；
证明内容：中心；
对齐项目：居中；
字体系列：无衬线；
文本转换：大写；
文字装饰：无；
文本对齐：居中；
颜色：#fff；
字体大小：粗体；
}
.肚脐活跃{
背景：7200da；
盒影：0.5px15px-3pxRGBA（114,0218,0.5）；
}
@介质（最大宽度：1000px）{
.导航{
柔性包装：包装；
}
.肚脐{
宽度：33.3333%；
边缘底部：1px；
}
}
@介质（最大宽度：400px）{
.导航{
柔性包装：包装；
}
.肚脐{
宽度：100%；
边缘底部：1px；
}
}

文件

多亏了您的解决方案，我在代码中发现了错误。那只是一行。我更改了这一行

let current=document.getElementsByClassName（“nav el active”）；

on

let current=document.queryselectoral（.nav el active”）；

document.addEventListener("DOMContentLoaded", function()
{
    //let headers = document.querySelector(".nav");
    let active = document.querySelectorAll(".nav-el");
    for(let i = 0; i< active.length; i++)
    {
        active[i].addEventListener("click", function()
        {
            let current = document.getElementsByClassName("nav-el-active");
            current[0].classList.remove("nav-el-active");
            this.classList.add("nav-el-active");
        });
    }
})