11

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

これは機能していないようです...どんな助けも大歓迎です:)よろしくアンドレア

4

3 に答える 3

38

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

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


jsfiddleデモを まとめて、実際の動作を示し、オプションで他のタブを非表示にする方法をまとめました。プログラムでタブを強制する場合、他のタブのロックを解除する前に、最初のタブに不足している必須情報を入力する必要があるためです...

編集 これが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});
    }
  });
});
于 2013-01-16T22:31:34.440 に答える
4

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

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

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

また、操作を実行するために、以下のようなタブアクティブイベントをキャッチできます

$( "#myTabs" ).on( "tabsactivate", function( event, ui ) {
    // your custom code on tab click
});
于 2012-05-24T10:21:20.360 に答える