Para configurar una clase activa en su barra de navegación de arranque, puede usar ng-controller (NavigationController) para configurar la clase activa de la barra de navegación de arranque con AngularJS. Para ejecutar un solo controlador fuera de ng-view . Puede configurar class = «activo» cuando se hace clic en la ruta angular.
El siguiente ejemplo implementa el enfoque anterior:
Ejemplo: este ejemplo explica cómo configurar la clase activa de la barra de navegación de arranque con AngularJS usando 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= "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="#">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>
Producción:
Publicación traducida automáticamente
Artículo escrito por KumariShwetha y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA