css - 更改事件选项卡上的类

Question

我使用了 Angular 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 类没有获取 css 类。 我什至尝试了 getActive!== 0 但这也不起作用 我如何让它工作

Answer 1

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

$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>

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