如何从引导程序将活动类设置为导航菜单？

为了通过滚动或单击导航链接将活动类别动态地设置到导航菜单，将根据网页的位置在每个部分上设置活动类别。为了添加方法和变量，使用了JavaScript。要执行某些操作，可以在某些事件(例如单击和滚动)上调用这些功能。

示例：此示例实现了上述方法。

HTML

  

    
    
    
  
    
    
  
    
    
    
      
    
    
  
    
    
  
  
    
        html {
            /*For smooth scrolling behavior*/
            scroll-behavior: smooth;
        }
  
        #home,
        #section1,
        #section2,
        #section3,
        #section4 {
            height: 70vh;
            text-align: center;
            font-size: 20px;
            padding-top: 50px;
        }
  
        #home {
            background-color: lightgreen;
        }
  
        #section1 {
            background-color: lightcoral;
        }
  
        #section2 {
            background-color: cyan;
        }
  
        #section3 {
            background-color: lightsalmon;
        }
  
        #section4 {
            background-color: lightseagreen;
        }
    

  

    
    
        
            
                
                    Geeks for Geeks
                
  
                
                    
                        
  
                            
                            
                                Home
                            
                        
  
                        
                            
                                Section 1
                            
                        
  
                        
                            
                                Section 2
                            
                        
  
                        
                            
                                Section 3
                            
                        
  
                        
                            
                                Section 4
                            
                        
                    
                
            
        
  
        
        
        
            Home 
        
            Section-1 
        
            Section-2 
        
            Section-3 
        
            Section-4 
  
        
        
  
            /* Code for changing active 
            link on clicking */
            var btns = 
                $("#navigation .navbar-nav .nav-link");
  
            for (var i = 0; i < btns.length; i++) {
                btns[i].addEventListener("click",
                                      function () {
                    var current = document
                        .getElementsByClassName("active");
  
                    current[0].className = current[0]
                        .className.replace(" active", "");
  
                    this.className += " active";
                });
            }
  
            /* Code for changing active 
            link on Scrolling */
            $(window).scroll(function () {
                var distance = $(window).scrollTop();
                $('.page-section').each(function (i) {
  
                    if ($(this).position().top 
                        <= distance + 250) {
                          
                            $('.navbar-nav a.active')
                                .removeClass('active');
  
                            $('.navbar-nav a').eq(i)
                                .addClass('active');
                    }
                });
            }).scroll();
        
    

  

输出：

• 滚动网页时：
  
• 在单击导航链接时：