Tabs active effect

Question

我有六個不同的選項卡，並且點擊任何應該突出顯示的選項卡。但我的標籤失敗了，我不知道我哪裏出錯了。請讓我知道我的錯誤。

腳本：

var app = angular.module('myapp',[]); 

app.controller('tabCtrl',function() {   
    this.tab = 1; 

    this.setTab = function (tabId) { 
     this.tab = tabId; 
    }; 

this.isSet = function (tabId) { 
    return this.tab === tabId; 
    }; 
}); 

https://plnkr.co/edit/VH1iGHS17sM4CDanEQCY?p=preview

上面一個是我所創建的plunker。請查看它。

Answer 1

您選擇選項卡的代碼非常好，即當您單擊選項卡時，綁定ng-click="tab.setTab(2)"會執行並將該選項卡設置爲活動狀態。

ng-class="{active:tab.isSet(2)}"也在單擊的選項卡上設置CSS類active。

但是，您可能無法查看問題，因爲您尚未添加任何突出顯示選定選項卡的CSS樣式。

例如，如果您添加以下CSS，你將能夠看到lightblue背景高亮所選標籤：

.active { 
    background-color: lightblue; 
} 

下面是更新後的代碼：https://plnkr.co/edit/CBmwvv6VEbfp8vbbndtp?p=preview

Answer 2

您的代碼看起來不錯。你只需要定義你的CSS'活躍'標籤。嘗試這樣的：

.active { 
    background: blue; 
    color: #f6f6f6; 
} 

更新plunkr here。