Question

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

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

Answer 1

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

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

假设您在page上设置$scope。

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-router，那么就会出现一个名为ui-sref-active的指令，它会在特定状态处于活动状态时添加自定义类。

这是一个有效的jsfiddle，展示了它是如何运作的。点student.profile状态也会在active状态上添加student类。