极客教程如何用Bootstrap和AngularJS设置导航条活动类
在这篇文章中，我们将看到如何用Bootstrap和AngularJS设置导航条活动类，并将通过实例了解其实现。为了完成这个任务，你可以使用ng-controller(NavigationController)来设置Bootstrap和AngularJS的导航条活动类。要在ng-view之外运行一个单一的控制器。你可以在Angular路由被点击时设置class= “active”。下面的例子实现了上述方法。
例子：这个例子解释了如何使用ngtroller在AngularJS中设置bootstrap navbar活动类。
<!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>
输出:
