Tab UI jQuery - Cara Mendapatkan Indeks Tab yang Saat Ini Dipilih

Saya tahu pertanyaan khusus ini telah ditanyakan sebelumnya , tetapi saya tidak mendapatkan hasil apa pun menggunakan bind()acara di jQuery UI Tabsplugin.

Saya hanya memerlukan indextab yang baru dipilih untuk melakukan tindakan saat tab diklik. bind()memungkinkan saya untuk terhubung ke acara pemilihan, tetapi metode saya yang biasa untuk mendapatkan tab yang saat ini dipilih tidak berfungsi. Ini mengembalikan indeks tab yang dipilih sebelumnya, bukan yang baru:

var selectedTab = $("#TabList").tabs().data("selected.tabs");

Berikut adalah kode yang saya coba gunakan untuk mendapatkan tab yang saat ini dipilih:

$("#TabList").bind("tabsselect", function(event, ui) {

});

Ketika saya menggunakan kode ini, objek ui kembaliundefined . Dari dokumentasi, ini seharusnya menjadi objek yang saya gunakan untuk menghubungkan ke indeks yang baru dipilih menggunakan ui.tab. Saya telah mencoba ini pada tabs()panggilan awal dan juga sendiri. Apakah saya melakukan sesuatu yang salah di sini?

Untuk JQuery UI versi sebelum 1.9 : ui.indexdari eventinilah yang Anda inginkan.

Untuk JQuery UI 1.9 atau yang lebih baru : lihat jawabannya oleh Giorgio Luparia, di bawah.

Jika Anda perlu mendapatkan indeks tab dari luar konteks acara tab, gunakan ini:

function getSelectedTabIndex() { 
    return $("#TabList").tabs('option', 'selected');
}

Pembaruan: Dari versi 1.9 'dipilih' diubah menjadi 'aktif'

$("#TabList").tabs('option', 'active')

UPDATE [ _{Min 08/26/2012} ] Jawaban ini menjadi sangat populer sehingga saya memutuskan untuk menjadikannya blog / tutorial lengkap.
Silakan kunjungi Blog Saya Di Sini untuk melihat informasi terbaru dalam akses mudah untuk bekerja dengan tab di jQueryUI
Juga disertakan (di blog juga) adalah jsFiddle

¡¡¡Perbarui! Harap diperhatikan: Dalam versi terbaru jQueryUI (1.9+), ui-tabs-selectedtelah diganti dengan ui-tabs-active. !!!

Saya tahu utas ini sudah tua, tetapi sesuatu yang tidak saya lihat disebutkan adalah cara mendapatkan "tab yang dipilih" (Saat ini panel yang dijatuhkan) dari tempat lain selain "peristiwa tab". Saya memiliki cara yang sederhana ...

var curTab = $('.ui-tabs-panel:not(.ui-tabs-hide)');

Dan untuk mudahnya mendapatkan index tersebut, tentunya ada cara yang tertera di situs ...

var $tabs = $('#example').tabs();
var selected = $tabs.tabs('option', 'selected'); // => 0

Namun, Anda dapat menggunakan metode pertama saya untuk mendapatkan indeks dan apa pun yang Anda inginkan tentang panel itu dengan cukup mudah ...

var curTab = $('.ui-tabs-panel:not(.ui-tabs-hide)'),
    curTabIndex = curTab.index(),
    curTabID = curTab.prop("id"),
    curTabCls = curTab.attr("class");
        //  etc ....

PS. Jika Anda menggunakan variabel iframe lalu .find ('. Ui-tabs-panel: not (.ui-tabs-hide)'), Anda juga akan mudah melakukan ini untuk tab yang dipilih dalam bingkai. Ingat, jQuery sudah melakukan semua kerja keras, tidak perlu menciptakan kembali roda!

Hanya untuk memperluas (diperbarui)

Pertanyaan diajukan kepada saya, "Bagaimana jika ada lebih dari satu area tab pada tampilan?" Sekali lagi, pikirkan sederhana, gunakan pengaturan saya yang sama tetapi gunakan ID untuk mengidentifikasi tab mana yang ingin Anda dapatkan.

Misalnya, jika Anda memiliki:

$('#example-1').tabs();
$('#example-2').tabs();

Dan Anda ingin panel saat ini dari set tab kedua:

var curTabPanel = $('#example-2 .ui-tabs-panel:not(.ui-tabs-hide)');

Dan jika Anda menginginkan tab AKTUAL dan bukan panel (sangat mudah, itulah sebabnya saya tidak menyebutkannya sebelumnya tetapi saya kira saya akan melakukannya sekarang, hanya untuk menyeluruh)

// for page with only one set of tabs
var curTab = $('.ui-tabs-selected'); // '.ui-tabs-active' in jQuery 1.9+

// for page with multiple sets of tabs
var curTab2 = $('#example-2 .ui-tabs-selected'); // '.ui-tabs-active' in jQuery 1.9+

Sekali lagi, ingat, jQuery melakukan semua kerja keras, jangan berpikir terlalu keras.

Jika Anda menggunakan JQuery UI versi 1.9.0 atau lebih tinggi, Anda dapat mengakses ui.newTab.index () di dalam fungsi Anda dan mendapatkan apa yang Anda butuhkan.

Untuk versi sebelumnya, gunakan ui.index .

var $tabs = $('#tabs-menu').tabs();
// jquery ui 1.8
var selected = $tabs.tabs('option', 'selected');
// jquery ui 1.9+
var active = $tabs.tabs('option', 'active');

Kapan Anda mencoba mengakses objek ui? UI tidak akan ditentukan jika Anda mencoba mengaksesnya di luar acara bind. Juga, jika garis ini

var selectedTab = $("#TabList").tabs().data("selected.tabs");

dijalankan di acara seperti ini:

$("#TabList").bind("tabsselect", function(event, ui) {
  var selectedTab = $("#TabList").tabs().data("selected.tabs");
});

selectedTab akan sama dengan tab saat ini pada saat itu (tab "sebelumnya".) Ini karena peristiwa "tabselect" dipanggil sebelum tab yang diklik menjadi tab saat ini. Jika Anda masih ingin melakukannya dengan cara ini, menggunakan "tabsshow" akan menghasilkan selectedTab yang sama dengan tab yang diklik.

Namun, itu tampaknya terlalu rumit jika yang Anda inginkan hanyalah indeksnya. ui.index dari dalam acara atau $ ("# TabList"). tabs (). data ("selected.tabs") di luar acara harus semua yang Anda butuhkan.

ini berubah dengan versi 1.9

sesuatu seperti

 $(document).ready(function () {
            $('#tabs').tabs({
                activate: function (event, ui) {
                    var act = $("#tabs").tabs("option", "active");
                    $("#<%= hidLastTab.ClientID %>").val(act);
                    //console.log($(ui.newTab));
                    //console.log($(ui.oldTab));
                }
            });

            if ($("#<%= hidLastTab.ClientID %>").val() != "") 
            {
                $("#tabs").tabs("option", "active", $("#<%= hidLastTab.ClientID %>").val());
            }


        });

seharusnya digunakan. Ini berfungsi dengan baik untuk saya ;-)

Jika ada orang yang mencoba mengakses tab dari dalam iframe, Anda mungkin memperhatikan itu tidak mungkin. The divtab tidak pernah mendapat ditandai sebagai yang dipilih, seperti tersembunyi atau tidak tersembunyi. Tautan itu sendiri adalah satu-satunya bagian yang ditandai sebagai dipilih.

<li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active ui-state-focus"><a href="#tabs-4">Tab 5</a></li>

Berikut ini akan memberi Anda hrefnilai tautan yang harus sama dengan id untuk penampung tab Anda:

jQuery('.ui-tabs-selected a',window.parent.document).attr('href')

Ini juga harus bekerja di tempat: $tabs.tabs('option', 'selected');

Ini lebih baik dalam arti bahwa alih-alih hanya mendapatkan indeks tab, ini memberi Anda id tab yang sebenarnya.

cara termudah untuk melakukannya adalah

$("#tabs div[aria-hidden='false']");

dan untuk indeks

$("#tabs div[aria-hidden='false']").index();

Dalam kasus jika Anda menemukan Indeks tab Aktif dan kemudian arahkan ke Tab Aktif

Pertama, dapatkan indeks Aktif

var activeIndex = $("#panel").tabs('option', 'active');

Kemudian menggunakan kelas css, dapatkan panel konten tab

// this will return the html element
var element=   $("#panel").find( ".ui-tabs-panel" )[activeIndex]; 

sekarang dibungkus dalam objek jQuery untuk digunakan lebih lanjut

 var tabContent$ = $(element);

di sini saya ingin menambahkan dua info kelas .ui-tabs-navuntuk Navigasi yang terkait dengan dan .ui-tabs-panelterkait dengan panel konten tab. dalam demo tautan ini di situs web jquery ui Anda akan melihat kelas ini digunakan - http://jqueryui.com/tabs/#manipulation

$( "#tabs" ).tabs( "option", "active" )

maka Anda akan memiliki indeks tab dari 0

sederhana

Coba yang berikut ini:

var $tabs = $('#tabs-menu').tabs();

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

var divAssocAtual = $('#tabs-menu ul li').tabs()[selected].hash;

Saya menemukan kode di bawah ini melakukan triknya. Menetapkan variabel indeks tab yang baru dipilih

$("#tabs").tabs({
    activate: function (e, ui) {
        currentTabIndex =ui.newTab.index().toString();
    }
});

Anda dapat memposting jawaban di bawah ini di posting Anda berikutnya

var selectedTabIndex= $("#tabs").tabs('option', 'active');

Cara lain untuk mendapatkan indeks tab yang dipilih adalah:

var index = jQuery('#tabs').data('tabs').options.selected;

$("#tabs").tabs({  
    load:  function(event, ui){  
        var anchor = ui.tab.find(".ui-tabs-anchor");  
        var url = anchor.attr('href');  
    }  
});  

Dalam variabel url Anda akan mendapatkan HREF / URL tab saat ini

Anda dapat menemukannya melalui:

$(yourEl).tabs({
    activate: function(event, ui) {
        console.log(ui.newPanel.index());
    }
});

ambil variabel tersembunyi seperti '<input type="hidden" id="sel_tab" name="sel_tab" value="" />'dan pada setiap acara klik tab, tulis kode seperti ...

<li><a href="#tabs-0" onclick="document.getElementById('sel_tab').value=0;" >TAB -1</a></li>
<li><a href="#tabs-1" onclick="document.getElementById('sel_tab').value=1;" >TAB -2</a></li>

Anda bisa mendapatkan nilai 'sel_tab' pada halaman yang diposting. :), sederhana !!!

Jika Anda ingin memastikan ui.newTab.index()tersedia di semua situasi (tab lokal dan jarak jauh), panggil dalam fungsi pengaktifan seperti yang tertulis dalam dokumentasi :

$("#tabs").tabs({
        activate: function(event, ui){
             alert(ui.newTab.index());
             // You can also use this to set another tab, see fiddle...
             // $("#other-tabs").tabs("option", "active", ui.newTab.index());                   
        },
});

http://jsfiddle.net/7v7n0v3j/

$("#tabs").tabs({
    activate: function(event, ui) {
        new_index = ui.newTab.index()+1;
        //do anything
    }
});