Вопрос по jquery, events, javascript – Как вызвать («щелкнуть») на активной вкладке jquery tab

8

У меня есть экран с вкладками и я хочу нажать на выбранную вкладку, как только форма будет отправлена и возврат будет действительным. Здесь часть 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');
}

Кажется, это не работает ... Любая помощь приветствуется :) С уважением, Андреа

Ваша функция успеха даже поражена? Вы пробовали оповещение выше триггера? mattytommo
Если вкладка уже выбрана, что вы ожидаете, нажав на нее, чтобы сделать? Rory McCrossan
Попробуйте $ ("li.current"). Parent (). Trigger ("click"); Imdad
ваша консоль js сообщает об ошибке? fcalderan
да, функция успеха поражена. Я пытался с $ ("# tabUL"). Find ("li.current a"). Css ("background-color", "red"); и весь ли был красным. Об ошибках не сообщается ... cwhisperer

Ваш Ответ

3   ответа
0

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

4

Если вы хотите перезагрузить вкладку программно, я рекомендую использовать утилиту 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
});
Error: User Rate Limit Exceeded cwhisperer
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded cwhisperer
26

Попробуйте использоватьa[href=""] селектор:

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


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

Edit Вот содержимое 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});
    }
  });
});

Похожие вопросы