Javascript 这个小把戏不起作用。我怎样才能修好它？

问题

javascript顶部的注释代码是我的尝试，以使相关的所选按钮选项卡（导航栏上的）改变颜色，获得背景等。但是当我取消注释顶部的代码时，它不仅不工作，而且汉堡菜单也停止工作

我如何调整它以使类正常工作（从而使所选选项卡对用户显而易见）

我的代码

//导航条！！
//所选的按钮可以改变颜色
/*
const selectedNav=document.querySelectorAll（'li'）；
selectedNav.forEach（（项目）=>{
document.selectedNav.addEventListener（'单击'，导航更改）
})
功能更改（事件）{
ul.forEach（（项目）=>{
item.classList.remove（'add-this-to-selected-section'）；
})
event.target.classList.add（'add-this-to-selected-section'）；
}
*/
常量导航幻灯片=（）=>{
const burger=document.querySelector（'.burger'）；
const nav=document.querySelector（'.nav links'）；
const navLinks=document.queryselectoral（'.nav links li'）；
//切换导航
burger.addEventListener（'click'，（）=>{
nav.classList.toggle（'nav-active'）；
//动画链接
navLinks.forEach（（链接，索引）=>{
if（link.style.animation）{
link.style.animation=''；
}否则{
link.style.animation=`navLinkFade 0.5s轻松转发${index/7+0.5}s`
}
})
//汉堡动画
burger.classList.toggle（'toggle'）；
})
}
导航幻灯片（）
nav{
显示器：flex；
证明内容：周围的空间；
对齐项目：居中；
最小高度：8vh；
字体系列：“Poppins”，无衬线；
背景色：#ffffff；
}
.导航链接{
显示器：flex；
证明内容：周围的空间；
宽度：50%；
}
.nav链接李{
列表样式：无；
}
.导航链接a{
颜色：#245871；
文字装饰：无；
字母间距：3px；
字号：800；
字号：18px；
}
。将此添加到所选节{
颜色：白色；
背景色：#245871；
填充物：5px；
边界半径：5px；
}
.汉堡部{
宽度：25px；
高度：3倍；
背景色：#245871；
保证金：5px；
过渡：所有0.3秒缓解；
}
.汉堡{
显示：无；
光标：指针；
}
@媒体屏幕和屏幕（最大宽度：1024）{
.导航链接{
宽度：70%；
光标：指针；
字号：1200；
}
}
@媒体屏幕和屏幕（最大宽度：997px）{
身体{
溢出x：隐藏；
}
导航{
颜色：白色；
}
.总btn{
颜色：白色；
}
.导航链接{
位置：绝对位置；
右：0px；
高度：92vh；
顶部：8vh；
背景色：#245871；
颜色：白色；
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
宽度：70%；
转化：translateX（100%）；
过渡：0.5s轻松过渡；
}
.导航链接a{
不透明度：1；
颜色：白色；
}
.汉堡{
显示：块；
}
}
.导航激活{
转化：translateX（0%）；
颜色：白色；
}
@关键帧navLinkFade{
从{
不透明度：0；
转换：translateX（50px）；
}到{
不透明度：1；
转换：translateX（0px）；
}
}

xxx







该类的背景颜色相同，而且该功能的javascript也存在一些问题。以下是它应该是什么样子：


const selectedNav=document.querySelectorAll（'li'）；
const navChange=（索引）=>{
selectedNav.forEach（（项目）=>{
item.classList.remove（'add-this-to-selected-section'）；
})
selectedNav[index].classList.add（'add-this-to-selected-section'）；
}
selectedNav.forEach（（项目，索引）=>{
item.addEventListener（'单击'，（）=>navChange（索引））
})
常量导航幻灯片=（）=>{
const burger=document.querySelector（'.burger'）；
const nav=document.querySelector（'.nav links'）；
const navLinks=document.queryselectoral（'.nav links li'）；
//切换导航
burger.addEventListener（'click'，（）=>{
nav.classList.toggle（'nav-active'）；
//动画链接
navLinks.forEach（（链接，索引）=>{
if（link.style.animation）{
link.style.animation=''；
}否则{
link.style.animation=`navLinkFade 0.5s轻松转发${index/7+0.5}s`
}
})
//汉堡动画
burger.classList.toggle（'toggle'）；
})
}
导航幻灯片（）
nav{
显示器：flex；
证明内容：周围的空间；
对齐项目：居中；
最小高度：8vh；
字体系列：“Poppins”，无衬线；
背景色：#ffffff；
}
.导航链接{
显示器：flex；
证明内容：周围的空间；
宽度：50%；
}
.nav链接李{
列表样式：无；
}
.导航链接a{
颜色：#245871；
文字装饰：无；
字母间距：3px；
字号：800；
字号：18px；
}
。将此添加到所选节{
颜色：白色；
背景色：红色；
填充物：5px；
边界半径：5px；
}
.汉堡部{
宽度：25px；
高度：3倍；
背景色：#245871；
保证金：5px；
过渡：所有0.3秒缓解；
}
.汉堡{
显示：无；
光标：指针；
}
@媒体屏幕和屏幕（最大宽度：1024）{
.导航链接{
宽度：70%；
光标：指针；
字号：1200；
}
}
@媒体屏幕和屏幕（最大宽度：997px）{
身体{
溢出x：隐藏；
}
导航{
颜色：白色；
}
.总btn{
颜色：白色；
}
.导航链接{
位置：绝对位置；
右：0px；
高度：92vh；
顶部：8vh；
背景色：#245871；