javascript - 尝试使用 JavaScript 删除一个类，元素不采用其他类的属性

Question

所以每当我的页面的 scrollTop 达到 1 时，它会自动向下滚动到页面上的另一个位置(这在 JSFiddle 中演示得更清楚)。这确实有效，但是尝试从菜单项中删除一个类(使其变为“未选中”)时，会出现问题。该元素似乎没有获得其他类的属性并显示为标准文本(再次查看 JSFiddle 的演示)。我想知道如何解决这个问题。

下面的代码是我的问题所在:

<div id="homeButton" class="menuItem selected">Home</div>
<div id="overButton" class="menuItem">Over</div>
<div id="contactButton" class="menuItem">Contact</div>

.menuItem {
    padding-top: 29px;
    height: calc(100% - 29px);
    border: 0;
    text-align: center;
    font-family: Signika;
    font-size: 25px;
    color: rgb(203, 207, 218);
}
.selected {
    border-bottom: 4px solid rgb(59, 89, 202);
    height: calc(100% - 33px);
    color: rgb(160, 170, 218);
}

var homeButton = document.getElementById("homeButton");
var aboutButton = document.getElementById("overButton");

homeButton.className = homeButton.className - " selected";
aboutButton.className = aboutButton.className + " selected";

Answer 1

使用这个

$("#homeButton").removeClass( "selected" );
$("#overButton").addClass( "selected" );

代替

var homeButton = document.getElementById("homeButton");
var aboutButton = document.getElementById("overButton");

homeButton.className = homeButton.className - " selected";
aboutButton.className = aboutButton.className + " selected";