In this article, we will see how to set the navbar active class with Bootstrap and AngularJS, & will know its implementation through the example. To accomplish this task, you can use ng-controller(NavigationController) to set the 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. The below example implements the above approach.
Example: This example explains how to set bootstrap navbar active class with AngularJS using ng-controller.
HTML
<!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 = "#" >Front-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: