在活动选项卡上更改课程

Question

我使用了角度 UI 选项卡，并且我有切换到不同选项卡的按钮。 每当同一选项卡处于活动状态时，我都会尝试更改该选项卡按钮的样式。所以我用 ng-class 来改变样式。

我在作用域内有返回活动标签的函数

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

 }

此函数返回数字 0、1、2 或 3，具体取决于哪个选项卡处于活动状态

这是我的 CSS 类

.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 类，但它不起作用。

 <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 类。 我什至尝试过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>

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