jQuery UIのタブ：現在のタブのインデックスを取得

Question

jQuery UIのタブを使用して現在のタブのインデックスを取得したい：特にshowまたはselectのイベントが発生したときに私はこのthayが参照されていることを知りたいですか？

Answer 1

$('#tabs').tabs({ 
    select: function(event, ui) { // select event 
     $(ui.tab); // the tab selected 
     ui.index; // zero-based index 
    }, 
    show: function(event, ui) { // show event 
     $(ui.tab); // the tab shown 
     ui.index; // zero-based index 
    } 
}); 

Demo

---

それとも、あなたは初期のイベントリスナーをバインドしたくない場合は、このようにそれらをバインドすることができます。

$('#tabs') 
    .bind('tabsselect', function(event, ui) { // select event 
     $(ui.tab); // the tab selected 
     ui.index; // zero-based index 
    }) 
    bind('tabsshow'. function(event, ui) { // show event 
     $(ui.tab); // the tab shown 
     ui.index; // zero-based index 
    }); 

Answer 2

あなたがこれを使用することができますfind

var $tabs = $('#tab').tabs(); 
var selected = $tabs.tabs('option', 'selected'); 

var lastTab = 0; // global variable 

$(function() { 
    $('#tabs').tabs({ 
     select: function(event, ui) { 
      lastTab = ui.index; 
     } 
    }); 
}); 

そしてどこか他のあなたのコード内のあなたは、単にlastTabを参照することができます。

var $tabs = $('#tab').tabs(); 
var selected = $tabs.tabs('option', 'active'); 

Answer 3

上のjQueryの1.9から私はちょうど私のプロジェクトの一つで、これを実装しました。 jQueryの1.9またはそれ以降の場合

Answer 4

...

$('#tabs').tabs({ 
    activate: function(event, ui) { 
     ui.newTab.index(); // zero-based index 
    } 
});