Tab giao diện người dùng jQuery - Cách lấy chỉ mục tab hiện được chọn

Tôi biết câu hỏi cụ thể này đã được hỏi trước đây , nhưng tôi không nhận được bất kỳ kết quả nào khi sử dụng bind()sự kiện trên jQuery UI Tabsplugin.

Tôi chỉ cần indextab mới được chọn để thực hiện một hành động khi tab được nhấp. bind()cho phép tôi kết nối với sự kiện đã chọn, nhưng phương pháp thông thường của tôi để lấy tab hiện được chọn không hoạt động. Nó trả về chỉ mục tab đã chọn trước đó, không phải chỉ mục mới:

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

Đây là mã tôi đang cố gắng sử dụng để lấy tab hiện được chọn:

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

});

Khi tôi sử dụng mã này, đối tượng ui sẽ quay trở lạiundefined . Từ tài liệu, đây phải là đối tượng tôi đang sử dụng để nối vào chỉ mục mới được chọn bằng cách sử dụng ui.tab. Tôi đã thử điều này trong tabs()cuộc gọi đầu tiên và cũng tự nó. Tôi đang làm gì đó sai ở đây?

Đối với các phiên bản giao diện người dùng JQuery trước 1.9 : ui.indextừ eventnhững gì bạn muốn.

Đối với giao diện người dùng JQuery 1.9 trở lên : hãy xem câu trả lời của Giorgio Luparia bên dưới.

Nếu bạn cần lấy chỉ mục tab từ bên ngoài ngữ cảnh của sự kiện tab, hãy sử dụng điều này:

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

Cập nhật: Từ phiên bản 1.9 'đã chọn' được đổi thành 'hoạt động'

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

CẬP NHẬT [ _{CN 26/08/2012} ] Câu trả lời này đã trở nên phổ biến đến mức tôi quyết định đưa nó thành một blog / hướng dẫn chính thức
Vui lòng truy cập Blog của tôi tại đây để xem thông tin mới nhất về cách dễ dàng truy cập để làm việc với các tab trong jQueryUI
Cũng được bao gồm (trong blog cũng vậy) là một jsFiddle

¡¡¡Cập nhật! Xin lưu ý: Trong các phiên bản mới hơn của jQueryUI (1.9+), ui-tabs-selectedđã được thay thế bằng ui-tabs-active. !!!

Tôi biết chủ đề này đã cũ, nhưng điều mà tôi không thấy đề cập là cách lấy "tab đã chọn" (Bảng điều khiển hiện được thả xuống) từ một nơi nào đó ngoài "sự kiện tab". Tôi có một cách đơn giản ...

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

Và để dễ dàng lấy chỉ mục, tất nhiên có cách liệt kê trên trang ...

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

Tuy nhiên, bạn có thể sử dụng phương pháp đầu tiên của tôi để lấy chỉ mục và bất kỳ thứ gì bạn muốn về bảng điều khiển đó khá dễ dàng ...

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

Tái bút. Nếu bạn sử dụng biến iframe thì .find ('. Ui-tabs-panel: not (.ui-tabs-hide)'), bạn cũng sẽ thấy dễ dàng thực hiện việc này cho các tab đã chọn trong khung. Hãy nhớ rằng, jQuery đã làm tất cả công việc khó khăn, không cần phải phát minh lại bánh xe!

Chỉ để mở rộng (cập nhật)

Tôi đã đưa ra câu hỏi, "Điều gì sẽ xảy ra nếu có nhiều hơn một vùng tab trên chế độ xem?" Một lần nữa, hãy nghĩ đơn giản, sử dụng thiết lập tương tự của tôi nhưng sử dụng ID để xác định tab nào bạn muốn nắm giữ.

Ví dụ: nếu bạn có:

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

Và bạn muốn bảng điều khiển hiện tại của bộ tab thứ hai:

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

Và nếu bạn muốn tab THỰC TẾ chứ không phải bảng điều khiển (thực sự dễ dàng, đó là lý do tại sao tôi không đề cập đến nó trước đây nhưng tôi cho rằng bây giờ tôi sẽ làm, chỉ để cho kỹ lưỡng)

// 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+

Một lần nữa, hãy nhớ rằng, jQuery đã làm tất cả công việc khó khăn, đừng suy nghĩ nhiều như vậy.

Nếu bạn đang sử dụng JQuery UI phiên bản 1.9.0 trở lên, bạn có thể truy cập ui.newTab.index () bên trong hàm của mình và nhận được những gì bạn cần.

Đối với các phiên bản cũ hơn, hãy sử dụng 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');

Khi nào bạn đang cố gắng truy cập đối tượng ui? ui sẽ không được xác định nếu bạn cố gắng truy cập nó bên ngoài sự kiện ràng buộc. Ngoài ra, nếu dòng này

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

được chạy trong sự kiện như thế này:

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

selectTab sẽ bằng tab hiện tại tại thời điểm đó (tab "trước".) Điều này là do sự kiện "tabsselect" được gọi trước khi tab được nhấp trở thành tab hiện tại. Nếu bạn vẫn muốn làm theo cách này, sử dụng "tabsshow" thay thế sẽ dẫn đến selectTab bằng với tab đã nhấp.

Tuy nhiên, điều đó có vẻ quá phức tạp nếu tất cả những gì bạn muốn là chỉ mục. ui.index từ bên trong sự kiện hoặc $ ("# TabList"). tab (). data ("select.tabs") bên ngoài sự kiện phải là tất cả những gì bạn cần.

điều này đã thay đổi với phiên bản 1.9

cái gì đó như

 $(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());
            }


        });

nên được sử dụng. Điều này làm việc tốt đối với tôi ;-)

Trong trường hợp ai đó đã cố gắng truy cập các tab từ bên trong iframe, bạn có thể nhận thấy điều đó là không thể. Các divtab không bao giờ được đánh dấu là được lựa chọn, cũng giống như ẩn hoặc không ẩn. Bản thân liên kết là phần duy nhất được đánh dấu là đã chọn.

<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>

Phần sau sẽ cung cấp cho bạn hrefgiá trị của liên kết phải giống với id cho vùng chứa tab của bạn:

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

Điều này cũng sẽ hoạt động thay cho: $tabs.tabs('option', 'selected');

Tốt hơn theo nghĩa là thay vì chỉ lấy chỉ mục của tab, nó sẽ cung cấp cho bạn id thực của tab.

cách dễ nhất để làm điều này là

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

và cho chỉ mục

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

Trong trường hợp nếu bạn tìm thấy Chỉ mục tab Hoạt động và sau đó trỏ đến Tab Hoạt động

Đầu tiên nhận chỉ mục Hoạt động

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

Sau đó, sử dụng lớp css, lấy bảng nội dung tab

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

bây giờ đã bọc nó trong đối tượng jQuery để sử dụng thêm

 var tabContent$ = $(element);

ở đây tôi muốn thêm hai thông tin lớp .ui-tabs-navdành cho Điều hướng được liên kết với và .ui-tabs-panelđược liên kết với bảng nội dung tab. trong bản demo liên kết này trong trang web jquery ui, bạn sẽ thấy lớp này được sử dụng - http://jqueryui.com/tabs/#manipulation

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

thì bạn sẽ có chỉ mục của tab từ 0

đơn giản

Hãy thử những cách sau:

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

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

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

Tôi tìm thấy đoạn mã dưới đây thực hiện thủ thuật. Đặt một biến của chỉ mục tab mới được chọn

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

Bạn có thể đăng câu trả lời bên dưới trong bài viết tiếp theo của bạn

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

Một cách khác để lấy chỉ mục tab đã chọn là:

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');  
    }  
});  

Trong biến url, bạn sẽ nhận được HREF / URL của tab hiện tại

Bạn có thể tìm thấy nó qua:

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

lấy một biến ẩn như '<input type="hidden" id="sel_tab" name="sel_tab" value="" />'và trên mỗi sự kiện onclick của tab, hãy viết mã như ...

<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>

bạn có thể nhận được giá trị của 'sel_tab' trên trang đã đăng. :) , đơn giản !!!

Nếu bạn muốn đảm bảo ui.newTab.index()khả dụng trong mọi tình huống (tab cục bộ và từ xa), hãy gọi nó trong chức năng kích hoạt như tài liệu hướng dẫn :

$("#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
    }
});