AngularJS:点击另一个按钮

时间:2016-08-22 14:27:25

标签: css angularjs

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

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

2 个答案:

答案 0 :(得分:3)

您需要阅读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>

答案 1 :(得分:0)

如果您正在使用ui-router,那么就会出现一个名为ui-sref-active的指令,它会在特定状态处于活动状态时添加自定义类。

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

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