如何使用Bootstrap和AngularJS设置navbar活动类？

要在引导导航栏中设置活动类，可以使用ng-controller(NavigationController)通过AngularJS设置引导导航栏活动类。在ng-view之外运行单个控制器。单击角度路径时，可以将class =“ active”设置为“ active”。

下面的示例实现了上述方法：

示例：此示例说明了如何使用ng-controller通过AngularJS设置bootstrap navbar活动类。

  

    
      
    
        Bootstrap Navbar Change
        Active Class Link
    
      
    
      
    
      
    
    
      
    
    
      
    
        body {
            margin: 20px;
        }
        #topheader .navbar-nav li > a {
            text-transform: capitalize;
            color: #333;
            -webkit-transition: background-color .2s, color .2s;
            transition: background-color .2s, color .2s;
        }
        #topheader .navbar-nav li > a:hover, 
        #topheader .navbar-nav li > a:focus {
            background-color: #005596;
            color: #fff;
        }
        #topheader .navbar-nav li.active > a {
            background-color: #3990E0;
            color: white;
        }
    

  

    
        
            
                
                    GeeksforGeeks
                
                  
                
                    
                        
                            home
                        
                        HTML
                        CSS
                        JavaScript
                    
                    
                        Fron-End
                    
                
            
        
    
  
    
        $( '#topheader .navbar-nav a' ).on('click', 
                    function () {
            $( '#topheader .navbar-nav' ).find( 'li.active' )
            .removeClass( 'active' );
            $( this ).parent( 'li' ).addClass( 'active' );
        });
    

  

输出：