jQuery UI टैब - वर्तमान में चयनित टैब इंडेक्स कैसे प्राप्त करें

Question

मुझे पता है कि यह विशिष्ट प्रश्न पहले पूछा गया है , लेकिन मुझे प्लगइन bind()पर घटना का उपयोग करके कोई परिणाम नहीं मिल रहा है jQuery UI Tabs।

indexजब टैब पर क्लिक किया जाता है तो मुझे एक क्रिया करने के लिए नए चयनित टैब की आवश्यकता होती है। bind()मुझे चुनिंदा ईवेंट में हुक करने की अनुमति देता है, लेकिन वर्तमान में चयनित टैब प्राप्त करने की मेरी सामान्य विधि काम नहीं करती है। यह पहले से चयनित टैब इंडेक्स लौटाता है, नया नहीं:

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

वर्तमान में चयनित टैब प्राप्त करने के लिए मैं जिस कोड का उपयोग करने का प्रयास कर रहा हूं, वह यहां है:

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

});

जब मैं इस कोड का उपयोग करता हूं, तो ui ऑब्जेक्ट वापस आ जाता हैundefined । प्रलेखन से, यह वह वस्तु होनी चाहिए जिसका उपयोग मैं ui.tab का उपयोग करके नए चयनित सूचकांक में हुक करने के लिए कर रहा हूं। मैंने शुरुआती tabs()कॉल पर और खुद भी यह कोशिश की है । क्या मुझसे यहां कुछ गलत हो रहा है?

Answer 1

1.9ui.index से पहले JQuery के यूआई संस्करणों के लिए : वह eventहै जो आप चाहते हैं।

JQuery UI 1.9 या बाद के लिए : नीचे जियोर्जियो लुपरिया द्वारा उत्तर देखें।

Comments

बहुत अच्छा जवाब! मैंने उत्तर में प्राप्त करने के लिए आसान बनाने के लिए आपने वेबसाइट में जो कुछ भी किया था उसका सारांश शामिल किया।

— 21

चीयर्स, क्यू ने उल्लेख किया है कि ui वस्तु शून्य थी, इसलिए वर्तमान में ui.index विफल हो जाएगा। मुझे लगता है कि इसका उत्तर शायद इतना आसान नहीं है जितना कि इसमें शामिल है।

— redsquare

यह एक आदर्श उत्तर था, और भयानक उदाहरण के लिए धन्यवाद! मैं 1 शॉट में सब कुछ करने की कोशिश कर रहा था, और यह काम नहीं कर रहा था। जब मैंने इसे विभाजित किया, तब सब कुछ विज्ञापन के रूप में काम करता था।

— मार्क स्ट्रूजिंस्की

इस सवाल का जवाब है - उपयोग ui.index संपत्ति tabselect स्थिति में वर्तमान सूचकांक पाने के लिए .....

— redsquare

उत्तर अपडेट किया जाना चाहिए क्योंकि यह JQuery UI 1.9.0 के साथ काम नहीं कर रहा है। आप ui.newTab.index () अपग्रेड मार्गदर्शिका के अनुसार (साथ ui.index बदलना चाहिए jqueryui.com/upgrade-guide/1.9/... )

— जियोर्जियो Luparia

Answer 2

यदि आपको टैब ईवेंट के संदर्भ में टैब इंडेक्स प्राप्त करने की आवश्यकता है, तो इसका उपयोग करें:

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

अपडेट: संस्करण 1.9 से 'चयनित' को 'सक्रिय' में बदल दिया गया है

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

Comments

वैसे भी मुझे वही दिखाई दिया जिसकी मुझे जरूरत थी।

— एल योबो

ऐसा लगता है कि यह वास्तव में डिफ़ॉल्ट टैब देता है, वर्तमान में चयनित टैब नहीं। मैं क्या खो रहा हूँ? 42 वोट गलत नहीं हो सकते, क्या वे कर सकते हैं? jqueryui.com/demos/tabs/#option-selected

— पैट्रिक सज़ालापस्की

हाँ, इस समाधान से मदद मिली। धन्यवाद @ कांटा

— अश्विन

JQuery UI संस्करण 1.9 में 'चयनित' विकल्प का नाम बदलकर 'सक्रिय' कर दिया गया है (देखें jqueryui.com/changelog/1.9.0 )

— jake

Answer 3

अद्यतन [ _{सूर्य ०D} / _२६ / _२०११ ] यह उत्तर इतना लोकप्रिय हो गया है कि मैंने इसे एक पूर्ण ब्लॉग / ट्यूटोरियल में बनाने का निर्णय लिया है।
कृपया मेरे ब्लॉग पर जाएँ यहाँ नवीनतम जानकारी तक पहुँचने के लिए 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 ....

पुनश्च। यदि आप एक iframe वैरिएबल का उपयोग करते हैं तो .find ('। Ui-tabs-panel: not (.ui-tabs-hide)') का उपयोग करते हैं, तो आपको फ़्रेम में चयनित टैब के लिए भी ऐसा करना आसान होगा। याद रखें, jQuery पहले से ही सभी कड़ी मेहनत करता है, पहिया को सुदृढ़ करने की कोई आवश्यकता नहीं है!

बस विस्तार (अद्यतन)

प्रश्न मेरे सामने लाया गया था, "क्या होगा यदि दृश्य पर एक से अधिक टैब क्षेत्र हैं?" फिर से, बस सरल सोचें, मेरे समान सेटअप का उपयोग करें लेकिन पहचानने के लिए एक आईडी का उपयोग करें कि आप किस टैब को पकड़ना चाहते हैं।

उदाहरण के लिए, यदि आपके पास:

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

और आप दूसरे टैब सेट का वर्तमान पैनल चाहते हैं:

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

और यदि आप वास्तविक टैब चाहते हैं और पैनल नहीं (वास्तव में आसान है, यही वजह है कि मैंने पहले इसका उल्लेख नहीं किया है, लेकिन मुझे लगता है कि मैं अब, बस पूरी तरह से होना चाहता हूं)

// 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 ने सारी मेहनत की, इतना कठिन मत सोचो।

Comments

उत्कृष्ट धन्यवाद! यदि आप चाहें तो आप इसे stackoverflow.com/q/1864219/11992 के उत्तर के रूप में भी प्रदान कर सकते हैं ।

— निको

यह वही है जो मुझे चाहिए था - धन्यवाद!

— जस्टिन एथियर

JQuery UI संस्करण 1.9 में 'चयनित' विकल्प का नाम बदलकर 'सक्रिय' कर दिया गया है (देखें jqueryui.com/changelog/1.9.0)।

— जेक

Answer 4

यदि आप JQuery UI संस्करण 1.9.0 या इसके बाद के संस्करण का उपयोग कर रहे हैं, तो आप अपने फ़ंक्शन के अंदर ui.newTab.index () का उपयोग कर सकते हैं और आपको जो आवश्यक है वह प्राप्त कर सकते हैं।

पहले के संस्करणों के लिए ui.index का उपयोग करें ।

Comments

यह बहुत अच्छा होगा यदि आप कुछ अतिरिक्त विवरण के साथ अपने जवाब को दे सकते हैं।

— स्लेज

Answer 5

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

Answer 6

आप ui ऑब्जेक्ट का उपयोग कब कर रहे हैं? यदि आप इसे बाइंड इवेंट के बाहर एक्सेस करने का प्रयास करते हैं, तो ui अपरिभाषित हो जाएगा। साथ ही अगर यह लाइन

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

इस तरह घटना में भाग गया है:

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

चयनितटैब उस समय (वर्तमान "पिछले") में उस समय के टैब को बराबर कर देगा। ऐसा इसलिए है क्योंकि क्लिक किए गए टैब के वर्तमान टैब बनने से पहले "टैबसेलेक्ट" घटना को बुलाया जाता है। यदि आप अभी भी इसे इस तरह से करना चाहते हैं, तो इसके बजाय "टैबशो" का उपयोग करके चयनित टैब को बराबर करने के लिए चयनितटैब होगा।

हालाँकि, यदि आप चाहते हैं कि यह अधिक जटिल है तो सूचकांक है। घटना के भीतर से ui.index या $ ("# टैबलिस्ट") टैब ()। डेटा ("चयनित" टैब ") घटना के बाहर वह सब होना चाहिए जो आपको चाहिए।

Comments

@ बाइन: आपका सॉल्यूशन पिछले सेलेक्टेड टैब को देता है क्योंकि जब इंडेक्स टेबसेलेट इवेंट को ट्रिगर किया गया था तो वह इंडेक्स था।

— माइकल माओ

@ मिसेल: क्या आपने मेरा जवाब पढ़ा या सिर्फ कोड पकड़ा? मेरे उत्तर में, मैं बताता हूं कि कोड काम नहीं करेगा और कुछ विकल्प प्रदान करेगा (ow tabshow ’इवेंट; ;.ind.ex; $ (L TabList’)। टैब ()। डेटा (.t चयनित.tabs ’))

— बेन। कोहलर

： मेरे देर से जवाब के बारे में क्षमा करें। हाँ, ui.index ठीक काम करता है। मैं सिर्फ इस तथ्य को इंगित करना चाहता था कि चयनितटैब "पिछले" चयनित टैब देता है, न कि एक संधि करने वाला। मेरा मतलब है कि आपके उत्तर के लिए कोई अपराध नहीं है।

— माइकल माओ

Answer 7

संस्करण 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());
            }


        });

इस्तेमाल किया जाना चाहिए। यह मेरे लिए ठीक काम कर रहा है ;-)

Answer 8

यदि किसी ने आइफ्रेम के भीतर से टैब तक पहुँचने की कोशिश की है, तो आप नोटिस कर सकते हैं कि यह संभव नहीं है। 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 लिंक मूल्य जो आपके टैब कंटेनर के लिए आईडी के समान होना चाहिए:

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

इसके स्थान पर भी काम करना चाहिए: $tabs.tabs('option', 'selected');

यह इस मायने में बेहतर है कि केवल टैब का इंडेक्स प्राप्त करने के बजाय, यह आपको टैब की वास्तविक आईडी देता है।

Answer 9

ऐसा करने का सबसे आसान तरीका है

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

और सूचकांक के लिए

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

Answer 10

यदि आप सक्रिय टैब इंडेक्स पाते हैं और फिर एक्टिव टैब को इंगित करते हैं

सबसे पहले एक्टिव इंडेक्स प्राप्त करें

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

फिर सीएसएस क्लास का उपयोग करके टैब सामग्री पैनल प्राप्त करें

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

Answer 11

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

तब आपके पास 0 से टैब का सूचकांक होगा

सरल

Answer 12

निम्नलिखित प्रयास करें:

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

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

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

Answer 13

मैंने पाया कि नीचे दिया गया कोड ट्रिक करता है। नए चयनित टैब इंडेक्स का एक चर सेट करता है

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

Answer 14

आप अपनी अगली पोस्ट में नीचे उत्तर दे सकते हैं

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

Comments

यह उत्तर वर्तमान सक्रिय टैब को खोजने के लिए उपयोगी है, खासकर जब टैब चयन घटना के संदर्भ में नहीं।

— hrabinowitz

Answer 15

चयनित टैब इंडेक्स प्राप्त करने का दूसरा तरीका है:

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

Answer 16

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

में यूआरएल चर आप मौजूदा टैब के HREF / यूआरएल मिलेगा

Answer 17

आप इसके माध्यम से पा सकते हैं:

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

Answer 18

एक छिपा हुआ चर लें जैसे '<input type="hidden" id="sel_tab" name="sel_tab" value="" />'और प्रत्येक टैब के ऑनक्लिक ईवेंट पर कोड लिखें जैसे ...

<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' का मान प्राप्त कर सकते हैं। :) , सरल !!!

Comments

मैंने आपको वोट नहीं दिया, लेकिन अतिरिक्त मार्कअप और इनलाइन जावास्क्रिप्ट का कोई कारण नहीं है। खासकर जब से वह पहले से ही jQuery का उपयोग कर रहा है ...

— जस्टिन एथियर

Answer 19

यदि आप यह सुनिश्चित करना चाहते हैं कि 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/

Answer 20

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

Comments

ढेर अतिप्रवाह में आपका स्वागत है! जबकि लिंक ज्ञान साझा करने का बहुत अच्छा तरीका है, अगर वे भविष्य में टूट जाते हैं तो वे वास्तव में इस सवाल का जवाब नहीं देंगे। अपने उत्तर में उस लिंक की आवश्यक सामग्री को जोड़ें जो प्रश्न का उत्तर देती है। यदि सामग्री बहुत जटिल या यहाँ फिट होने के लिए बहुत बड़ी है, तो प्रस्तावित समाधान के सामान्य विचार का वर्णन करें। हमेशा याद रखें कि मूल समाधान की वेबसाइट पर एक लिंक संदर्भ रखें। देखें: मैं एक अच्छा उत्तर कैसे लिखूं?

— s --unıɐ ןɐ qɐp