活动类正在添加，但不删除以前的菜单

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的代码

$(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'); 
     } 
    }); 
    }); 
});