web-dev-qa-db-ja.com

jqueryタブの現在アクティブなタブでトリガー（「クリック」）する方法

タブ付きの画面があり、フォームが送信されて戻り値が有効になったら、選択したタブのクリックをトリガーしたい。ここに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');
}

これは機能していないようです...助けていただければ幸いです:)よろしくアンドレア

javascriptjqueryeventsjquery-ui-tabseventtrigger
10
cwhisperer

a[href=""]セレクターを使用してみてください：

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


jsfiddle demo を組み合わせて実際に表示し、オプションで他のタブを非表示にする方法を示します。他のタブのロックを解除する前の最初のタブ...

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});
    }
  });
});
30
WebChemist

プログラムでタブを再読み込みする場合は、以下のようなJqueryタブAPIユーティリティを使用することをお勧めします。これにより、最初のタブがアクティブになり、次に2番目のタブがアクティブになります。非常に単純で、直接クリックしたときに通常発生するイベントも発生します。

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

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

また、次のようなタブのアクティブイベントをキャッチして、任意の操作を実行できます。

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

クリックイベント自体をトリガーしようとするのではなく（このコンテキストではプログラムでユーザーイベントを呼び出すことはできないと思います）、クリックイベントで呼び出す必要がある関数をトリガーすることをお勧めします。 triggerHandler

0
optimusprime619