jQuery UI Tabs - วิธีรับดัชนีแท็บที่เลือกในปัจจุบัน

ฉันรู้ว่ามีการถามคำถามเฉพาะนี้มาก่อนแต่ฉันไม่ได้รับผลลัพธ์ใด ๆ จากbind()เหตุการณ์ในjQuery UI Tabsปลั๊กอิน

ฉันแค่ต้องการindexแท็บที่เลือกใหม่เพื่อดำเนินการเมื่อคลิกแท็บ bind()ช่วยให้ฉันสามารถเชื่อมต่อกับเหตุการณ์ที่เลือกได้ แต่วิธีการรับแท็บที่เลือกในปัจจุบันใช้งานไม่ได้ จะส่งคืนดัชนีแท็บที่เลือกไว้ก่อนหน้านี้ไม่ใช่ดัชนีใหม่:

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

นี่คือรหัสที่ฉันพยายามใช้เพื่อรับแท็บที่เลือกในปัจจุบัน:

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

});

เมื่อฉันใช้รหัสนี้วัตถุ UI undefinedกลับมา จากเอกสารนี่ควรเป็นวัตถุที่ฉันใช้เชื่อมต่อกับดัชนีที่เลือกใหม่โดยใช้ ui.tab ฉันได้ลองสิ่งนี้ในการtabs()โทรครั้งแรกและด้วยตัวมันเอง ฉันทำอะไรผิดที่นี่?

สำหรับ JQuery UI เวอร์ชันก่อน 1.9 : ui.indexจากeventคือสิ่งที่คุณต้องการ

สำหรับ JQuery UI 1.9 หรือใหม่กว่า : ดูคำตอบของ Giorgio Luparia ด้านล่าง

หากคุณต้องการรับดัชนีแท็บจากภายนอกบริบทของเหตุการณ์แท็บให้ใช้สิ่งนี้:

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

อัปเดต: จากเวอร์ชัน 1.9 "ที่เลือก" จะเปลี่ยนเป็น "ใช้งานอยู่"

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

อัปเดต [ _{อา. 26/26/2555} ] คำตอบนี้ได้รับความนิยมมากจนฉันตัดสินใจนำมาทำเป็นบล็อก / บท
ช่วยสอนเต็มรูปแบบ โปรดไปที่บล็อกของฉันที่นี่เพื่อดูข้อมูลล่าสุดที่เข้าถึงได้ง่ายในการทำงานกับแท็บใน jQueryUI
รวมอยู่ด้วย (ในบล็อกด้วย) เป็นjsFiddle

¡¡¡อัพเดท! โปรดทราบ: ในเวอร์ชันใหม่กว่าของ jQueryUI (1.9+) ui-tabs-selectedได้ถูกแทนที่ด้วยui-tabs-activeไฟล์. !!!

ฉันรู้ว่าเธรดนี้เก่า แต่สิ่งที่ฉันไม่เห็นกล่าวถึงคือวิธีรับ "แท็บที่เลือก" (ขณะนี้ดร็อปดาวน์แผง) จากที่อื่นที่ไม่ใช่ "เหตุการณ์ของแท็บ" ฉันมีวิธีง่ายๆ ...

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

และเพื่อให้ได้ดัชนีได้อย่างง่ายดายแน่นอนว่ามีวิธีที่ระบุไว้ในเว็บไซต์ ...

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

อย่างไรก็ตามคุณสามารถใช้วิธีแรกของฉันเพื่อรับดัชนีและอะไรก็ได้ที่คุณต้องการเกี่ยวกับแผงควบคุมนั้นค่อนข้างง่าย ...

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

PS หากคุณใช้ตัวแปร iframe แล้ว. find ('. ui-tabs-panel: not (.ui-tabs-hide)') คุณจะพบว่าการทำเช่นนี้ทำได้ง่ายสำหรับแท็บที่เลือกในเฟรมเช่นกัน จำไว้ว่า jQuery ได้ทำงานหนักทั้งหมดแล้วไม่จำเป็นต้องสร้างวงล้อใหม่!

เพียงเพื่อขยาย (อัปเดต)

คำถามเกิดขึ้นกับฉัน "จะเกิดอะไรขึ้นถ้ามีพื้นที่มากกว่าหนึ่งแท็บในมุมมอง" คิดง่ายๆอีกครั้งใช้การตั้งค่าเดิมของฉัน แต่ใช้ ID เพื่อระบุแท็บที่คุณต้องการเก็บไว้

ตัวอย่างเช่นหากคุณมี:

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

และคุณต้องการแผงปัจจุบันของชุดแท็บที่สอง:

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

และถ้าคุณต้องการแท็บ ACTUAL ไม่ใช่แผงควบคุม (ง่ายมากซึ่งเป็นเหตุผลว่าทำไมฉันถึงไม่พูดถึงมันมาก่อน แต่ฉันคิดว่าฉันจะตอนนี้เพื่อให้ละเอียดถี่ถ้วน)

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

โปรดจำไว้ว่า jQuery ทำงานหนักทั้งหมดอย่าคิดให้ยาก

หากคุณใช้ JQuery UI เวอร์ชัน 1.9.0 ขึ้นไปคุณสามารถเข้าถึงui.newTab.index ()ภายในฟังก์ชันของคุณและรับสิ่งที่คุณต้องการได้

สำหรับรุ่นก่อนหน้านี้ใช้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');

คุณพยายามเข้าถึงวัตถุ ui เมื่อใด ui จะไม่ถูกกำหนดหากคุณพยายามเข้าถึงนอกเหตุการณ์การผูก นอกจากนี้ถ้าสายนี้

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

มีการจัดกิจกรรมดังนี้:

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

แท็บที่เลือกจะเท่ากับแท็บปัจจุบัน ณ เวลานั้น (แท็บ "ก่อนหน้า") เนื่องจากเหตุการณ์ "เลือกแท็บ" ถูกเรียกก่อนที่แท็บที่คลิกจะกลายเป็นแท็บปัจจุบัน หากคุณยังคงต้องการทำเช่นนี้ให้ใช้ "tabsshow" แทนจะทำให้ selectedTab เท่ากับแท็บที่คลิก

อย่างไรก็ตามดูเหมือนว่าจะซับซ้อนเกินไปหากสิ่งที่คุณต้องการคือดัชนี ui.index จากภายในเหตุการณ์หรือ $ ("# TabList"). tabs (). data ("selected.tabs") นอกเหตุการณ์ควรเป็นทั้งหมดที่คุณต้องการ

สิ่งนี้เปลี่ยนไปด้วยเวอร์ชัน 1.9

สิ่งที่ต้องการ

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


        });

ควรใช้ มันใช้งานได้ดีสำหรับฉัน ;-)

ในกรณีที่มีใครพยายามเข้าถึงแท็บจากภายใน iframe คุณอาจสังเกตเห็นว่าเป็นไปไม่ได้ divของแท็บไม่เคยได้รับเลือกทำเครื่องหมายว่าเป็นเช่นเดียวกับที่ซ่อนอยู่หรือไม่ซ่อน ลิงค์เป็นเพียงชิ้นเดียวที่ทำเครื่องหมายว่าเลือก

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

สิ่งต่อไปนี้จะทำให้คุณได้รับhrefค่าของลิงก์ซึ่งควรจะเหมือนกับ ID สำหรับคอนเทนเนอร์แท็บของคุณ:

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

สิ่งนี้ควรใช้แทน: $tabs.tabs('option', 'selected');

จะดีกว่าในแง่ที่ว่าแทนที่จะได้รับดัชนีของแท็บ แต่จะให้ id จริงของแท็บ

วิธีที่ง่ายที่สุดคือ

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

และสำหรับดัชนี

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

ในกรณีที่คุณพบ Active tab Index แล้วชี้ไปที่ Active Tab

ก่อนอื่นให้รับดัชนีที่ใช้งานอยู่

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

จากนั้นใช้คลาส css รับแผงเนื้อหาแท็บ

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

ตอนนี้ห่อไว้ในวัตถุ jQuery เพื่อใช้งานต่อไป

 var tabContent$ = $(element);

ที่นี่ฉันต้องการเพิ่มข้อมูลสองอย่างที่คลาส.ui-tabs-navนี้ใช้สำหรับการนำทางที่เชื่อมโยงและ.ui-tabs-panelเชื่อมโยงกับแผงเนื้อหาของแท็บ ในลิงค์นี้สาธิตในเว็บไซต์ jquery ui คุณจะเห็นคลาสนี้ใช้ - http://jqueryui.com/tabs/#manipulation

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

จากนั้นคุณจะมีดัชนีของแท็บจาก 0

ง่าย

ลองทำดังต่อไปนี้:

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

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

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

ฉันพบว่าโค้ดด้านล่างเป็นเคล็ดลับ ตั้งค่าตัวแปรของดัชนีแท็บที่เลือกใหม่

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

คุณสามารถโพสต์คำตอบด้านล่างในโพสต์ถัดไปของคุณ

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

อีกวิธีหนึ่งในการรับดัชนีแท็บที่เลือกคือ:

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

ในตัวแปรurlคุณจะได้รับ HREF / URL ของแท็บปัจจุบัน

คุณสามารถค้นหาได้ทาง:

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

ใช้ตัวแปรที่ซ่อนอยู่เช่น'<input type="hidden" id="sel_tab" name="sel_tab" value="" />'และในแต่ละเหตุการณ์ onclick เขียนโค้ดเช่น ...

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

คุณจะได้รับค่า 'sel_tab' ในหน้าที่โพสต์ :) ง่ายๆ !!!

หากคุณต้องการให้แน่ใจว่าui.newTab.index()พร้อมใช้งานในทุกสถานการณ์ (แท็บในเครื่องและระยะไกล) ให้เรียกใช้ในฟังก์ชันเปิดใช้งานตามที่เอกสารระบุว่า:

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