活动类正在添加但不删除上一个菜单

Question

我正在尝试制作一个菜单，其中菜单项应该主动滚动。 一切都很完美，除了单击下一个菜单项时，它会从上一个菜单类中删除活动类，但不会将活动类添加到新菜单中

以下是我的代码

<div class="row text-center" id="side-menu">
<nav>
<ol>
<li>
<a href="#page1" class="myanimate">
<span class="icons iconactive"><i class="fa fa-circle"></i></span>
<span class="namee">Home</span>
</a>
</li>
<li>
<a href="#page2" class="myanimate">
<span class="icons"><i class="fa fa-circle"></i></span>
<span class="namee">Design</span> 
</a>
</li>
<li>
<a href="#page3" class="myanimate">
<span class="icons"><i class="fa fa-circle"></i></span>
<span class="namee">Review</span>
</a>
</li>
</ol>
</nav>
</div>

CSS 活动菜单

.iconactive{
font-size: 15px;
color: brown;
margin-right: -3.2px;
}

Jquery Codes

$(document).ready(function() {
var scrollLink = $('.myanimate');
// Smooth scrolling
scrollLink.click(function(e) {
e.preventDefault();
$('body,html').animate({
scrollTop: $(this.hash).offset().top
}, 2000 );
});
// Active link switching
$(window).scroll(function() {
var scrollbarLocation = $(this).scrollTop();
scrollLink.each(function() {
var sectionOffset = $(this.hash).offset().top - 20;
if ( sectionOffset <= scrollbarLocation ) {
$(this).children('.icons').addClass('iconactive');
$(this).children('.icons').removeClass('iconactive');
}
});
});
});

Answer 1

您正在从 jquery 部分中的同一元素中添加和删除活动类 尝试

$(document).ready(function() {
var scrollLink = $('.myanimate');
// Smooth scrolling
scrollLink.click(function(e) {
e.preventDefault();
$('body,html').animate({
scrollTop: $(this.hash).offset().top
}, 2000 );
});
// Active link switching
$(window).scroll(function() {
var scrollbarLocation = $(this).scrollTop();
scrollLink.each(function() {
var sectionOffset = $(this.hash).offset().top - 20;
if ( sectionOffset <= scrollbarLocation ) { 
$('.icons').removeClass('iconactive');
$(this).children('.icons').addClass('iconactive'); 
}
});
});
});