AngularJS：通过点击另一个按钮来更改CSS

Question

我有3个按钮“Home”，“About”和“Contact”。在页面加载时，我只希望“主页”按钮处于活动状态。点击“关于”按钮后，只有“关于”按钮处于激活状态，其余2个按钮不起作用。同样，在点击“联系人”按钮之后，只有“联系人”按钮处于活动状态，其余2个按钮不起作用。

这里的“活动”一词表示按钮具有不同的CSS（与其他2个按钮相比）。我使用AngularJS作为我的前端JS。

Answer 1

您需要阅读Angular ngClass directive的文档。

With ngClass您可以将css类绑定到视图中的变量。

假设您在$scope上设置了page。

JS（您的角度控制器内）

$scope.page = 'home'; 

HTML

<li ng-class="{'active': page == 'home'}" ng-click="page = 'home'">Home</li> 

CSS

<style type="text/css"> 
    .active { 
     background: blue; 
    } 
</style> 

Answer 2

如果您使用的UI路由器然后有一个指令称为UI，SREF -active在特定状态处于活动状态时添加自定义类。

http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.directive:ui-sref-active

这里的工作jsfiddle这说明它是如何工作的。在student状态也加active类的点student.profile状态。