JQuery get/set active tabs

[Simple tabs in bootstrap modal]

 

<!-- Modal -->
    <div class="modal fade" id="partner-promotion-date-modal" tabindex="-1" role="dialog"
         aria-labelledby="partnerPromotionDateLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="partnerPromotionDateLabel" style="text-align: center">신규/추천 가게 등록</h4>
                </div>
                <div class="modal-body">
                    <!-- Tabs -->
                    <div role="tabpanel" id="tabs">
                        <!-- Nav tabs -->
                        <ul class="nav nav-tabs" role="tablist">
                            <li role="presentation" class="active">
                                <a href="#entryStore" aria-controls="entryStore" role="tab" data-toggle="tab"><b>신규
                                    가게</b></a>
                            </li>
                            <li role="presentation">
                                <a href="#recommendStore" aria-controls="recommendStore" role="tab"
                                   data-toggle="tab"><b>추천 가게</b></a>
                            </li>
                            <li role="presentation">
                                <a href="#entryRecommendStore" aria-controls="entryRecommendStore" role="tab"
                                   data-toggle="tab"><b>신규/추천 가게</b></a>
                            </li>
                        </ul>
                        <!-- Tab panes -->
                        <div class="tab-content">
                            <div id="partner-promotion-contents">
                                <table class="table table-bordered data-table" id="promotionTable">
                                    <thead>
                                    <tr>
                                        <th style="width:25%">상점명</th>
                                        <th style="width:15%">밴드</th>
                                        <th style="width:20%">점주명</th>
                                        <th style="width:20%">파트너ID</th>
                                        <th style="width:20%">작업내용</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <td style="text-align: center;background: white;" colspan="5">지난 내역이 없습니다.</td>
                                    </tbody>
                                </table>
                            </div>
                            <label class="control-label">
                                ※ 선택한 가게들 중 일반인 가게만 신규/추천 가게로 등록할 수 있습니다.<br/>
                                <b>(이미 신규, 추천 혹은 신규/추천으로 등록된 가게는 자동 제외됩니다)</b>
                            </label>

                            <div role="tabpanel" class="tab-pane active" id="entryStore"></div>
                            <div role="tabpanel" class="tab-pane" id="recommendStore"></div>
                            <div role="tabpanel" class="tab-pane" id="entryRecommendStore"></div>
                        </div>
                    </div>
                </div>
                <!-- /.tabs -->
                <div class="modal-footer">
                    <button id="partner-promotion-date-save" type="button" class="btn btn-primary save">적용하기</button>
                    <button id="partner-promotion-date-close" type="button" class="btn btn-default"
                            style="border-color: #ccc" data-dismiss="modal">닫기
                    </button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->

 

[Jquery 1.12+ ]

 

$(document).ready(function(){

  $('#tabs').tabs(); //init tabs important

});


//if you don't init tab, you will to occur error like bottom message.
//cannot call methods on tabs prior to initialization; attempted to call method 'option'

var activeTabIdx = $('#tabs').tabs('option','active');

alert(activeTabIdx); // currently active tab number ( 0 ~ )


//onChange
$(function () {
    $("#addTabs").tabs({
        activate: function( event, ui ) {
            alert("123123");
        }
    });
});