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狀態。