How to Set navbar active class with Bootstrap and AngularJS ?

To set an active class in your bootstrap navbar, you can use ng-controller(NavigationController) to set bootstrap navbar active class with AngularJS. To run a single controller outside ng-view. You can set class= “active” when the angular route is clicked.

Below example implements the above approach:

Example: This example explain how to set bootstrap navbar active class with AngularJS using ng-controller.

<!DOCTYPE html> 
<html lang="en" > 
  
<head> 
    <meta charset="UTF-8"> 
      
    <title> 
        Bootstrap Navbar Change 
        Active Class Link 
    </title> 
      
    <link rel="stylesheet" href= 
"https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> 
      
    <link rel='stylesheet' href= 
'https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'> 
      
    <script src= 
'https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'> 
    </script> 
      
    <script src= 
'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'> 
    </script> 
      
    <style> 
        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; 
        } 
    </style> 
</head> 
  
<body> 
    <div id="topheader"> 
        <nav class="navbar navbar-default"> 
            <div class="container-fluid"> 
                <div class="navbar-header"> 
                    <a class="navbar-brand" href="#"
                    style="color: green;">GeeksforGeeks</a> 
                </div> 
                  
                <div class="collapse navbar-collapse"
                        id="bs-example-navbar-collapse-1"> 
                    <ul class="nav navbar-nav"> 
                        <li class="active"><a href="#home"> 
                            home</a> 
                        </li> 
                        <li><a href="#page1">HTML</a></li> 
                        <li><a href="#page2">CSS</a></li> 
                        <li><a href="#page3">JavaScript</a></li> 
                    </ul> 
                    <ul class="nav navbar-nav navbar-right"> 
                        <li><a href="#">Fron-End</a></li> 
                    </ul> 
                </div> 
            </div> 
        </nav> 
    </div> 
  
    <script> 
        $( '#topheader .navbar-nav a' ).on('click',  
                    function () { 
            $( '#topheader .navbar-nav' ).find( 'li.active' ) 
            .removeClass( 'active' ); 
            $( this ).parent( 'li' ).addClass( 'active' ); 
        }); 
    </script> 
</body> 
  
</html> 

Output:

My Personal Notes

Recommended Posts: