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 = < link rel = 'stylesheet' href = < script src = </ script > < script src = </ 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 > |
chevron_right
filter_none
Output: