Question

我正在尝试使用bootstrap创建一个标签。除了页面加载外，一切都已设置，活动标签的样式不会更改。如果我们单击单个选项卡，则样式会正确更改。仅在页面加载时，它不起作用。

我创建了一个plunker并在链接下方给出。

plunker = link

我的要求是，当页面加载第一个标签（即活动标签）时，它将以不同的样式显示。

提前感谢您的帮助。

Answer 1

如果有任何疑问，请告诉我，正如您所说，这对您有用：

(function () {
    var app = angular.module('myApp', []);

    app.controller('TabController', function () {
        this.tab = 1;

        this.setTab = function (tabId) {
            this.tab = tabId;
        };

        this.isSet = function (tabId) {
            return this.tab === tabId;
        };
    });
})();

<div class="container">
    <section ng-app="myApp" ng-controller="TabController as tab">
        <ul class="nav nav-pills">
            <li ng-class="{active:tab.isSet(1)}"><a href ng-click="tab.setTab(1)">Tab 1</a></li>
            <li ng-class="{active:tab.isSet(2)}"><a href ng-click="tab.setTab(2)">Tab 2</a></li>
            <li ng-class="{active:tab.isSet(3)}"><a href ng-click="tab.setTab(3)">Tab 3</a></li>
        </ul>
        
        <div ng-show="tab.isSet(1)">
             <h4>Tab 1</h4>
        </div>
        <div ng-show="tab.isSet(2)">
             <h4>Tab 2</h4>
        </div>
        <div ng-show="tab.isSet(3)">
             <h4>Tab 3</h4>
        </div>
    </section>
</div>

如何在页面加载时更改活动选项卡的样式

1 个答案: