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

【问题标题】：active class is adding but not removing the previous menu活动类正在添加但不删除上一个菜单
【发布时间】：2018-02-04 18:18:41
【问题描述】：

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

以下是我的代码

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

【问题讨论】：

标签： jquery html css navigation

【解决方案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'); 
      }
    });
  });
});

【讨论】：