タブのアクティブな効果

Question

私は6つの異なるタブを持っていて、タブをクリックするとそのタブが強調表示されます。しかし、私のタブは失敗している、私はどこに間違っているのか分からない。私の間違いを教えてください。

スクリプト：1以上

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を追加した場合

たとえば、あなたが水色の背景で強調表示、選択したタブを表示することができます：

.active { 
    background-color: lightblue; 
} 

はここで更新されたコードです：https://plnkr.co/edit/CBmwvv6VEbfp8vbbndtp?p=preview

Answer 2

あなたのコードは正常に見えます。 「アクティブな」タブ用にCSSを定義するだけです。次のように試してみてください。

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

plunkr hereが更新されました。