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 part中的同一元素中添加和删除活动类尝试

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

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

1 个答案: