Как активировать («щелчок») на активной вкладке вкладки jQuery

Question

У меня есть экран с табуляцией и вы хотите вызвать щелчок на выбранной вкладке после отправки формы и возврата. Вот часть 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> 

Моя команда успех:

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

Это, кажется, не работает ... Любая помощь приветствуется :) С уважением Andrea

Answer 1

Если вы хотите, чтобы перезагрузить вкладку программно, то я рекомендую использовать JQuery Tab API, как показано ниже: Это делает первую вкладку активной, а затем активирует вторую вкладку, довольно просто, а также поднимает события, которые обычно поднимаются при прямом нажатии.

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

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

Также вы можете поймать язычки активное событие, как показано ниже для выполнения каких-либо операций

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

Answer 2

вместо того, чтобы вызвать само событие щелчка (который я считаю, это не представляется возможным ссылаться на пользовательское событие программно в этот контекст), я полагаю, что вы вызываете функцию, которая должна быть вызвана на событие щелчка, вы можете захотеть взглянуть на triggerHandler

Answer 3

Try с помощью переключателя a[href=""]:

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

я собрал jsfiddle demo, чтобы показать его в действии, и как дополнительно скрыть другие вкладки, так как часто, когда я программно заставляя язычки его, чтобы требовать отсутствует обязательная информация быть введены на вкладке начального до разблокировки другие вкладки ...

Редактировать Вот содержание 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}); 
    } 
    }); 
});