CODEWITHSUNDEEP
cssangularjstabs
Sarath Lal
Sarath Lal

Reputation: 13

How to change active tab's style when page loads

I am trying to create a tab using bootstrap. Everything is set except while page loads, the active tab's style is not changed. If we click the individual tab the style is changed correctly. Only in the page load, it is not working.

I have created a plunker and given below the link.

plunker = link

My requirement is when page loads the first tab (that is active tab) will be shown in a different style.

Thanks in advance for your help.

Upvotes: 1

Views: 213

Answers (1)

Jigar7521
Jigar7521

Reputation: 1579

let me know if any query, as you have mentioned that this is usful for you :

http://jsfiddle.net/simonbingham/bFWUM/ 

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

Upvotes: 1

Related Questions