觸發器選項卡激活功能-jQuery UI選項卡

Question

我遇到了問題。

HTML代碼段如下所示

<div id="mainTab">
    <ul>
        <li><a href='#tabs-1'>TabGroup1</a></li>
        <li><a href='#tabs-2'>TabGroup2</a></li>            
    </ul>
    <div id='tabs-1'>
        <a onclick="showSubTab1Tab2();">showSubTab1Tab2</a>
        <a onclick="showSubTab2Tab2();>showSubTab2Tab2</a>
    </div>
    <div id='tabs-2'>
        <!-- First Sub Tab -->
        <div id="subTab1">
            <ul>
                <li><a href='#tabs-3'>TabGroup3</a></li>
                <li><a href='#tabs-4'>TabGroup4</a></li>            
            </ul>
            <div id='tabs-3'>

            </div>
            <div id='tabs-4'>

            </div>
        </div>
        <!-- Second Sub Tab -->
        <div id="subTab2">
            <ul>
                <li><a href='#tabs-5'>TabGroup5</a></li>
                <li><a href='#tabs-6'>TabGroup6</a></li>            
            </ul>
            <div id='tabs-5'>

            </div>
            <div id='tabs-6'>

            </div>
        </div>
    </div>
</div>

和javascript看起來像這樣。 我正在使用JQuery UI 1.10.3

$("#mainTab").tabs();

$( "#subTab1" ).tabs({
    activate: function( event, ui ) {
        // Update Some Logs
    }
});

$( "#subTab2" ).tabs({
    activate: function( event, ui ) {
        // Update Some Logs
    }
});

function showSubTab1Tab2() {
    $("#mainTab").tabs( "option", "active", 1);
    $( "#subTab1" ).tabs( "option", "active", 1);
}

function showSubTab2Tab2() {
    $("#mainTab").tabs( "option", "active", 1);
    $( "#subTab2" ).tabs( "option", "active", 1);
}

如果用戶單擊“ showSubTab2Tab2”。 我更改了主標簽。 將用戶帶到第二個選項卡。 然后激活subTab2的第二個選項卡，如果該選項卡先前未激活，則將激活第二個選項卡並觸發激活事件

現在這是問題所在。 如果用戶兩次執行此操作，則第二次未激活事件。 我需要該事件來記錄/填充前端代碼。

我不能在我的職能中做到這一點。

Answer 1

並且如果您嘗試檢查以前在showSubTab1Tab2()的狀態

http://jsfiddle.net/S4nua/1/

Answer 2

試試這個代替您的“標簽”代碼。 每次顯示標簽時都會觸發：

$('a[href="#subTab2"]').on('shown', function () {
        ---- your code here ----
  });