Wie (klicken ') auf jquery Registerkarte der derzeit aktive Registerkarte

Question

Ich habe einen Tab-Bildschirm und möchte einen Klick auf die ausgewählte Registerkarte auslösen, sobald das Formular übermittelt wird und die Rückgabe gültig ist. Hier ist ein Teil des html:

<ul id="tabUL" class="tabs js-tabs same-height"> 
    <li class="current"> 
     <a class="tabLink" href="#tabProducts" data-url="/bla/bla">Products</a> 
    </li> 
</ul> 

Mein Erfolg Befehl lautet:

success: function(data, textStatus, XMLHttpRequest) { 
    $('#tabUL').find('li.current a').trigger('click'); 
} 

Dies scheint nicht funktioniert ... Jede Hilfe ist willkommen :) Grüße Andrea

Answer 1

Wenn Sie möchten, neu zu laden Die Registerkarte programmgesteuert, dann empfehle ich Jquery Tab API-Dienstprogramm wie folgt: Dies macht erste Registerkarte aktiv und aktiviert dann zweite Registerkarte, ganz einfach und löst auch die Ereignisse, die normalerweise ausgelöst würden, wenn Sie direkt klicken.

$("#myTabs").tabs("option", "active", 0); 

$("#myTabss").tabs("option", "active", 1); 

Sie können auch Tabs aktiv Ereignis wie unten fangen alle Vorgänge zur Durchführung

$("#myTabs").on("tabsactivate", function(event, ui) { 
    // your custom code on tab click 
}); 

Answer 2

anstatt zu versuchen, das Click-Ereignis auszulösen selbst (was ich glaube nicht möglich ist, ein Benutzerereignis programmatisch in aufzurufen in diesem Zusammenhang), schlage ich vor, dass Sie die Funktion auslösen, die auf Klick-Ereignis aufgerufen werden muss, möchten Sie vielleicht triggerHandler

Answer 3

Versuchen schauen, um in den a[href=""] Selektor:

$('#tabUL a[href="#tabProducts"]').trigger('click'); 

Ich habe ein jsfiddle demo es in Aktion zu zeigen, und wie man gegebenenfalls die anderen Registerkarten, da oft verstecken, wenn ich programmatisch seine zwingen bin Tabs obligatorische Informationen zu verlangen, fehlt auf dem Anfang Registerkarte eingegeben werden, bevor Entriegeln die anderen Registerkarten ...

bearbeiten Hier ist der Inhalt des jsfiddle:

HTML

<div id="tabs"> 
    <ul> 
    <li><a href="#tab0">Address</a></li> 
    <li><a href="#tab1">Shipping</a></li> 
    <li><a href="#tab2">Parts</a></li> 
    <li><a href="#tab3">Datasheets</a></li> 
    </ul> 
    <div id="tab0"> 
     <h1>This is the first tab (0)</h1> 
    </div> 
    <div id="tab1"> 
    <h1>This is the second tab (1)</h1> 
    </div> 
    <div id="tab2"> 
    <h1>This is the third tab (2)</h1> 
    </div> 
    <div id="tab3"> 
    <h1>This is the fourth tab (3)</h1> 
    </div> 
</div> 
<br/> 
Select the 
<select id="tabSelect"> 
    <option value="0">1st</option> 
    <option value="1">2nd</option> 
    <option value="2">3rd</option> 
    <option value="3">4th</option> 
</select>Tab and 
<input type="checkbox" id="tabHide" checked="checked" /> Lock the Others 

jQuery

$(document).ready(function() { 
    $('#tabs').tabs(); 
    $('#tabSelect').change(function() { 
     //pass empty array to unlock any locked tabs 
    $('#tabs').tabs({disabled: []}).find('a[href="#tab' + $(this).val() + '"]').trigger('click'); 

    if ($('#tabHide').prop('checked')) { 
     //hide will be an array like [0,2,3] 
     var hide = Array(); 
     $('#tabs li').not('.ui-tabs-active').each(function() { 
     hide.push($(this).index()); 
     });  
     $('#tabs').tabs({disabled: hide}); 
    } 
    }); 
});