Javascript 试图在html中使用onClick属性切换类，但不起作用

大家好，我正在试着让导航栏工作，这样当我点击它时，它会将类从一个活动项更改为另一个活动项，反之亦然，对于任何其他活动项，此时我看不出哪里出了问题。初学者程序员在这里非常抱歉，如果这是显而易见的

提前谢谢

HTML:

---

如果打开控制台（F12），您的代码可能会出现一些语法错误

• 开关

  为保留关键字
• 列表项

  getElementsByClassName

  返回

  NodeList

• className（“项目”）不是一个函数

如果需要切换当前元素

活动
类，可以使用
classList.toggle
方法

如果您还需要“停用”rest，则可以使用
document.querySelectorAll（'.item.active'）
与
forEach
循环相结合

function deactivate() {
   [].forEach.call(document.querySelectorAll('.item.active'), function(el) {
     el.classList.remove('active')
   })
}


功能切换（el）{
el.classList.toggle（'active'）
}
.active{
颜色：红色；
}
首先，switch是一个保留字，不能用作函数名。那么className不是一个方法，而是一个属性，可以设置


功能开关1（x）{
var className=x.getAttribute（“类”）；
如果（类名=“项”）{
x、 className=“项目活动”；
}
否则{
x、 className=“项目”；
}
返回真值
}
开关
是保留关键字，您不应将其用作函数名，请更改为下面类似的其他名称

<a href="#about_me" class="item active" onClick="switchClass(this);">
    About me
</a>
<a href="#experience" class="item" onClick="switchClass(this);">
    Experiences
</a>
<a href="#education" class="item" onClick="switchClass(this);">
    Education
</a>
<script>

    function switchClass(x) {
        if(document.getElementsByClassName("item active").length){
            document.getElementsByClassName("item active")[0].className = "item";
        }
        x.className = "item active";
        return true;
    }
</script>


功能开关类（x）{
if（document.getElementsByClassName（“项目活动”）.length）{
document.getElementsByClassName（“项目活动”）[0].className=“项目”；
}
x、 className=“项目活动”；
返回true；
}


示例代码
.主动{
颜色：红色；
边框：1px纯红；
}
功能突出显示（el）{
$（'.item'）.removeClass（'active'）；
$（el）.addClass（“活动”）；
}
是的，jquery会使事情变得简单，请尝试以下代码




.主动{
颜色：红色；
}
功能开关（id）{
$（“.item”）。每个（函数（）{
$（this.removeClass（'active'）；
});
$（'#'+id）.addClass（'active'）；
}
switch是JavaScript中的保留关键字，您可以为函数使用其他名称。谢谢您的回答@OscarLingard，欢迎你，考虑支持和接受答案，如果它有帮助的话。干杯谢谢你的提示！
function deactivate() {
   [].forEach.call(document.querySelectorAll('.item.active'), function(el) {
     el.classList.remove('active')
   })
}

<a href="#about_me" class="item active" onClick="switchClass(this);">
    About me
</a>
<a href="#experience" class="item" onClick="switchClass(this);">
    Experiences
</a>
<a href="#education" class="item" onClick="switchClass(this);">
    Education
</a>
<script>

    function switchClass(x) {
        if(document.getElementsByClassName("item active").length){
            document.getElementsByClassName("item active")[0].className = "item";
        }
        x.className = "item active";
        return true;
    }
</script>