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

这里的“活动”一词表示该按钮具有不同的CSS(与其他2个按钮相比)。我将AngularJS用作前端JS。css - AngularJS:单击另一个按钮更改CSS-LMLPHP

最佳答案

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

10-05 20:53
查看更多