সক্রিয় ট্যাব পরিবর্তনের জন্য বুটস্ট্র্যাপ 3 জ্যাকুই ইভেন্ট

Question

বুটস্ট্র্যাপ 3 ট্যাব / নাভবারের ট্যাব পরিবর্তন এবং আক্ষরিক অর্থে গুগল স্পাট আউট সমস্ত পরামর্শ ভুল ছিল / কাজ করে নি তখন আমি একটি ফাংশন ফায়ার করার চেষ্টা করতে অবাস্তব পরিমাণ ব্যয় করেছি ।

কিভাবে এই সম্পর্কে যেতে হবে?

মেটা এডিট: মন্তব্য দেখুন

Comments

এটি সত্যিই দরকারী ছিল! আমরা যদি কেবলমাত্র একটি নির্দিষ্ট ট্যাবের জন্য নজর রাখতে চাই তবে আমরা $ ("a [href = '# ট্যাব_নাম']") এর জন্য দেখতে পারি (('দেখানো। বিএসটিবি', এফএন) অবশ্যই আমরা আরও নির্বাচক নির্দিষ্ট করতে পারি যদি একটি [href = '# ট্যাব_নাম'] অনন্য হওয়ার গ্যারান্টিযুক্ত নয়।

— মিসানজয়

টুইটার বুটস্ট্র্যাপের

— রোজারডপ্যাক

@rogerdpack ' stackoverflow.com/questions/13164239/... ' থেকে পুনর্নির্দেশ করতে বিভ্রান্তিকর মনে হয়, এটা প্রশ্নকারী একটি ভুল পথ নিয়ে যায় এবং এটা সুযোগ মধ্যে উত্তরের জন্য তাকিয়ে প্রশ্ন মাত্রাতিরিক্ত দীর্ঘ এবং নির্দিষ্ট এবং গৃহীত উত্তর এটা প্রতিফলিত করতে মনে হয় কারণ এটি অবশ্যই আমার প্রশ্নের বৈধ উত্তর নয়। এই প্রশ্নটি যেহেতু অনেক লোক সম্ভবত এর সাথে সম্পর্কিত সম্ভবত সাহায্য করে নি।

— গারবেন রাম্পার্ট

Answer 1

এরিক স্যুপ এটি করতে জানেন knows

$('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বিশ্বব্যাপী ভেরিয়েবল হিসাবে ঘোষনা করেছি এবং উপরে বর্ণিত মান নির্ধারণ করেছি। আমি যখন পৃষ্ঠাটি প্রথম লোড করি তখন আমি লক্ষ্যমাত্রার মান (সতর্কতা) অপরিজ্ঞাত হিসাবে পাই। তবে, যখন আমি ট্যাবটি পরিবর্তন করি এবং লক্ষ্যটিকে সেই মানটি নির্ধারণ করি, তখন আমি কোনও সতর্কতা পাচ্ছি না। এমনকি কোনও ত্রুটির বার্তাও নয়। এই লুপের বাইরে আনতে আমার কী করা উচিত? আমি ডকুমেন্টের বাইরে ভেরিয়েবল ঘোষণা করেছি ready

— এসএসএস 12

আমি অন্য ট্যাবে ক্লিক করলেই এটি কাজ করে। ডিফল্ট ট্যাবটির জন্য সেই ট্রিগারটি কীভাবে যুক্ত করবেন? আমার প্রতিটি ট্যাবে এজ্যাক্স লোড করা দরকার। তবে এটির সাহায্যে কেবল তখনই লোড হয় যখন আমি অন্য ট্যাবে ক্লিক করি এবং তারপরে আবার প্রথমটি।

— কার্লিস জেনিসেলস

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

সমস্যাটি হ'ল অ্যাটর ('href') কখনই খালি থাকে না।

বা # আইডি = "# কিছু মান" তুলনা করতে এবং তারপরে এজাক্স কল করুন।

Comments

হ্যাঁ কেবলমাত্র অ্যাটর ('href') কখনই খালি থাকে না। এটি ট্যাবের আইডি ফিরিয়ে দেয়।

— ফ্লোরিন

আমি বুঝেছি. আমি মনে করি সবার কাছে আমার মন্তব্যটি 'show.bs.tab' বিটে ফোকাস করেছে। আমি এটি ট্র্যাকিং সত্যিই কঠিন সময় ছিল।

— গারবেন রাম্পার্ট

ওকোক ... যোগ করা হয়েছে: খালি নির্বাচনকারী।

— গারবেন রাম্পার্ট

ধন্যবাদ। জাদুর মত!

— দানি হেরের

আপনাকে ধন্যবাদ ফ্লোরিন আমার সমস্যা আপনার ফাংশন দিয়ে সমাধান করা হয়। পছন্দ করি!

— আইয়ুব আমিনী

Answer 3

@ গার্বেনের পোস্টের জন্য ধন্যবাদ জানতে পেরে দুটি ডকুমেন্টে ব্যাখ্যা করা হয়েছে show.bs.tab (ট্যাবটি দেখানোর আগে) এবং show.bs.tab (ট্যাব দেখানোর পরে) ডকগুলিতে ব্যাখ্যা করা হয়েছে - বুটস্ট্র্যাপ ট্যাব ব্যবহার

একটি অতিরিক্ত সমাধান যদি আমরা কেবলমাত্র একটি নির্দিষ্ট ট্যাবে আগ্রহী, এবং সম্ভবত একটি যুক্ত না করে পৃথক ফাংশন যুক্ত করতে পারি - অন্যথায় একটি ফাংশনে ব্লক করে, হ্রেফ সিলেক্টরটি ব্যবহার করা হয় (প্রয়োজনে অতিরিক্ত নির্বাচকদের পাশাপাশি)

 $("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

মোশ ফেউ উত্তর যুক্ত করতে, ফ্লাইতে যে ট্যাবগুলি তৈরি হয়েছিল তা যদি আমার ক্ষেত্রে পছন্দ করে তবে আপনি নীচের কোডটি ব্যবহার করবেন

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

আমার জন্য পুরোপুরি কাজ করে।

— ম্যাটডি

এই হাই-জ্যাকগুলি ডিফল্ট ট্যাব কার্যকারিতা বুটস্ট্র্যাপ করে। আপনার যদি এটি করতে হয় তবে আপনার ট্যাবগুলি আরম্ভ করা হচ্ছে না।

— আর্কোনিক

এটি একটি 'হ্যাকি' উপায় এবং এড়ানো উচিত।

— জুনি ব্রোসাস

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>