सक्रिय टैब परिवर्तन के लिए बूटस्ट्रैप 3 jquery घटना

Question

जब मैंने बूटस्ट्रैप 3 टैब / नेवबार के टैब में बदलाव किया और शाब्दिक रूप से सभी सुझाव दिए गए थे कि कोई कार्य नहीं किया था, तो मैंने एक अवास्तविक राशि खर्च की ।

इस बारे में कैसे जाना है?

मेटा-एडिट: टिप्पणी देखें

Comments

यह वास्तव में उपयोगी था! यदि हम केवल एक विशिष्ट टैब के लिए बाहर देखना चाहते हैं, तो हम $ के लिए देख सकते हैं ("[a href = '# tab_name]]")।) (' show.bs.tab ', fn) बेशक हम आगे के चयनकर्ताओं को निर्दिष्ट कर सकते हैं यदि [a href = '# tab_name'] अद्वितीय होने की गारंटी नहीं है।

— msanjay

Twitter बूटस्ट्रैप

— rogerdpack

@rogerdpack ' stackoverflow.com/questions/13164239/… ' को अनुप्रेषित करने के लिए भ्रामक लगता है, यह प्रश्नकर्ता ने गलत रास्ता अपनाया है और इसके दायरे में उत्तर की तलाश की है, यह प्रश्न बहुत लंबा और विशिष्ट है और स्वीकृत उत्तर ऐसा लगता है कि क्योंकि यह निश्चित रूप से मेरे प्रश्न का मान्य उत्तर नहीं है। तथ्य यह है कि इस सवाल से मदद नहीं मिली क्योंकि कई लोग शायद उसी से संबंधित हैं।

— गेर्बन रामपार्ट

Answer 1

एरिक सॉपे जानता है कि यह कैसे करना है

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  var target = $(e.target).attr("href") // activated tab
  alert(target);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<ul id="myTab" class="nav nav-tabs">
  <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
  <li class=""><a href="#profile" data-toggle="tab">Profile</a></li>
</ul>
<div id="myTabContent" class="tab-content">
  <div class="tab-pane fade active in" id="home">
    home tab!
  </div>
  <div class="tab-pane fade" id="profile">
    profile tab!
  </div>
</div>

Comments

बहुत बहुत धन्यवाद, अपना उत्तर खोजने से पहले इस पर काफी समय बिताया, आपने रॉक किया!

— हज्जत

यदि आपको परिवर्तन की घटना (लिंक से कार्रवाई की परवाह किए बिना) का उपयोग करना है, तो बस उपयोग करें$(document).on('shown.bs.tab', function (e) { console.log('ae'); });

— एलाइन माटोस

बिल्कुल सही, मुझे इस के साथ बहुत समय बचाया!

— जस्टिन

मुझे इसमें एक छोटा सा संदेह है। मैंने targetएक वैश्विक चर के रूप में घोषित किया और ऊपर बताए अनुसार मान को सौंपा। जब मैं पहली बार पृष्ठ को लोड करता हूं, तो मुझे लक्ष्य के मान (अलर्ट) को अपरिभाषित के रूप में प्राप्त होता है। लेकिन, जब मैं टैब बदलता हूं और उस मान को लक्ष्य पर असाइन करता हूं, तो मुझे कोई अलर्ट नहीं मिल रहा है। त्रुटि संदेश भी नहीं। उस पाश से बाहर लाने के लिए मुझे क्या करना चाहिए? मैंने document.ready फ़ंक्शन के बाहर चर घोषित किया है।

— एसएसएस

यह तभी काम करता है जब मैं दूसरे टैब पर क्लिक करता हूं। डिफ़ॉल्ट टैब के लिए उस ट्रिगर को कैसे जोड़ा जाए? मुझे हर टैब पर अजाक्स लोड करने की आवश्यकता है। लेकिन इसके साथ ही यह लोड होता है जब मैं दूसरे टैब पर क्लिक करता हूं और फिर पहले।

— कारेलिस जैनील्स

Answer 2

$(function () {
    $('#myTab a:last').tab('show');
});

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    var target = $(e.target).attr("href");
    if ((target == '#messages')) {
        alert('ok');
    } else {
        alert('not ok');
    }
});

समस्या यह है कि attr ('href') कभी खाली नहीं होती है।

या #id = "#some वैल्यू" की तुलना करने के लिए और फिर ajax को कॉल करें।

Comments

हां सिर्फ अटर ('href') कभी अनुकरणीय नहीं है। यह टैब की आईडी लौटाता है।

— फ्लोरिन

मै समझता हुँ। मुझे लगता है कि मेरी टिप्पणी 'show.bs.tab' बिट पर केंद्रित है। मैं एक बहुत कठिन समय था कि नीचे ट्रैकिंग।

— गेरबन रामपार्ट 15

ओकोक ... गयी: खाली चयनकर्ता।

— गेर्बन रामपार्ट 15

धन्यवाद। जादू की तरह!

— दानी हेररा

साभार @Florin आपके कार्य से मेरी समस्या हल हो गई है। पसंद!

— अय्यूब अमिनी

Answer 3

@ गेर्बन की पोस्ट की बदौलत पता चला कि दो इवेंट्स show.bs.tab हैं (टैब दिखाए जाने से पहले) और दिखाया गया है। d.t (टैब दिखाए जाने के बाद) डॉक्स में बताया गया है - बूटस्ट्रैप टैब का उपयोग

एक अतिरिक्त समाधान यदि हम केवल एक विशिष्ट टैब में रुचि रखते हैं, और हो सकता है कि एक फ़ंक्शन में एक और ब्लॉक जोड़ने के बिना अलग-अलग फ़ंक्शन जोड़ते हैं, तो एक href चयनकर्ता का उपयोग करना है (शायद अतिरिक्त चयनकर्ताओं के साथ यदि आवश्यक हो)

 $("a[href='#tab_target_id']").on('shown.bs.tab', function(e) {
      console.log('shown - after the tab has been shown');
 });

 // or even this one if we want the earlier event
 $("a[href='#tab_target_id']").on('show.bs.tab', function(e) {
      console.log('show - before the new tab has been shown');
 });

डेमो

Comments

महान समाधान, मुझे टैब शो इवेंट के बाद पकड़ने और अपने कोणीय फ़ंक्शन पर कॉल करने की आवश्यकता है, इस समाधान ने मुझे कुछ घंटे बचाए!

— एलन

Answer 4

Mosh Feu उत्तर में जोड़ने के लिए, यदि मेरे मामले में मक्खी की तरह बनाए गए टैब, तो आप निम्न कोड का उपयोग करेंगे

$(document).on('shown.bs.tab', 'a[data-toggle="tab"]', function (e) {
    var tab = $(e.target);
    var contentId = tab.attr("href");

    //This check if the tab is active
    if (tab.parent().hasClass('active')) {
         console.log('the tab with the content id ' + contentId + ' is visible');
    } else {
         console.log('the tab with the content id ' + contentId + ' is NOT visible');
    }

});

मुझे उम्मीद है इससे किसी को सहायता मिलेगी

Answer 5

इसने मेरे लिए काम किया।

$('.nav-pills > li > a').click( function() {
    $('.nav-pills > li.active').removeClass('active');
    $(this).parent().addClass('active');
} );

Comments

मेरे लिए पूरी तरह से काम करता है।

— मैटीडी

यह हाई-जैक बूटस्ट्रैप डिफ़ॉल्ट टैब कार्यक्षमता है। यदि आपको ऐसा करना है, तो आपके टैब आरंभ नहीं कर रहे हैं।

— 3

यह एक 'हैकी' तरीका है और इससे बचना चाहिए।

— जूनी ब्रोसस

Answer 6

मैं दूसरे दृष्टिकोण का उपयोग करता हूं।

बस सब खोजने की कोशिश aजहां idकुछ से शुरू होता है -स्ट्रिंग ।

जे एस

$('a[id^=v-photos-tab]').click(function () {
     alert("Handler for .click() called.");
});

एचटीएमएल

<a class="nav-item nav-link active show"  id="v-photos-tab-3a623245-7dc7-4a22-90d0-62705ad0c62b" data-toggle="pill" href="#v-photos-3a623245-7dc7-4a22-90d0-62705ad0c62b" role="tab" aria-controls="v-requestbase-photos" aria-selected="true"><span>Cool photos</span></a>