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

上面是我创造的那个掠夺者。请仔细看看。

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。

标签活动效果

2 个答案: