javascript - 尝试使用 html 中的 onClick 属性来切换类但不起作用

Question

嗨，所以我正在尝试让我的导航栏正常工作，这样当我单击它时，它会将类从项目更改为事件项目，反之亦然，对于任何其他事件项目，目前我看不出哪里出了问题。如果这是显而易见的，初学者程序员很抱歉!

提前致谢。

HTML:

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

Javascript:

function switch(x) {
  var className = x.getAttribute("class");
  if(className == "item") {
    document.getElementsByClassName("item active").className("item");
    x.className = "item active";
  }
  else {
    x.className = "item";
  }
  return true
}

Answer 1

您的代码存在一些语法错误，打开控制台 (F12) 即可发现。

• switch 是保留关键字
• 列表项getElementsByClassName返回NodeList
• className("item"); 不是函数

如果您需要切换当前元素active类，您可以使用classList.toggle方法。

如果您还需要“停用”休息，则可以将 document.querySelectorAll('.item.active') 与 forEach 循环结合使用。

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

function toggle(el) {
  el.classList.toggle('active')
}

.active {
  color: red;
}

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