更改活动选项卡上的 class

Question

我用过 angular UI 标签，我有切换到不同标签的按钮。每当同一个选项卡处于活动状态时，我都试图更改该选项卡按钮的样式。所以我用 ng-class 来改变样式。

我有范围内的功能，returns 活动选项卡

 $scope.getActive = function() {
     return tabSelector.active;
    console.log("active tab = " + tabSelector.active);

 }

此函数 returns 数字 0、1、2 或 3 取决于哪个选项卡处于活动状态

这是我的 css classes

.btn-white-hollow {
    padding: 20px 20px 20px 20px;
    margin-top: 16px;
    background-color: #fff;
    color: #0A135E;
    font-weight: bolder;
    -webkit-transition: all linear .2s;
    transition: all linear .2s;
}

.btn-white-hollow-selected {
    padding: 20px 20px 20px 20px;
    margin-top: 16px;
    background-color: #fff;
    color: #fd7400;
    border-bottom: 2px solid #fd7400;
    background: #fff;

}

我试过使用这种格式的 ng class 但它不起作用。

 <li class="seekerhead" >
    <button  type="button" ng-class= { 'btn-white-hollow-selected' : getActive() == '0', 'btn-white-hollow' : getActive!== '0' }>Ask a Question
    </button>
</li>

问题是 ng-class 没有获取 css classes。我什至试过 getActive!== 0 但这也不管用我如何让它工作

Answer 1

即使给定的代码遗漏了一些信息，您也应该能够按照此代码实现您正在寻找的内容。在您的控制器中定义一个附加到范围的活动变量，初始化为您希望默认激活的面板的变量。

$scope.activeTab = 1; //supposing you want the first one to be enabled

然后在您的 HTML 选项卡代码中使用以下代码： <button type="button" ng-class="{ 'btn-white-hollow-selected' : activeTab === 1, 'btn-white-hollow' : activeTab !== 1 }" ng-click="activeTab = 1"> Ask a Question </button>

这里假设您发布的按钮是与选项卡对应的按钮。

更改活动选项卡上的 class

Changing class on active Tab

css

tabs

angularjs

angular-ui-bootstrap