활성 탭 변경에 대한 부트스트랩 3 jquery 이벤트

활성 탭 변경에 대한 부트스트랩 3 jquery 이벤트

저는 부트스트랩 3 탭/navbar의 탭 변경과 말 그대로 구글이 뱉은 모든 제안이 잘못되었거나 작동하지 않을 때 기능을 실행하려고 비현실적인 시간을 보냈습니다.

어떻게 하는 거지?

메타 편집: 주석 참조

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

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

문제는 '속성')이 절대 비어 있지 않다는 것입니다.

또는 #id = "#some value"를 비교한 다음 Ajax를 호출합니다.

@Gerben의 게시물 덕분에 문서에 설명된 바와 같이 show.bs .tab(탭이 표시되기 전)과 shown.bs .tab(탭이 표시된 후) 두 가지 이벤트가 있다는 것을 알게 되었습니다. - Bootstrap Tab 사용

특정 탭에만 관심이 있고, 한 기능에 if - else 블록을 추가할 필요 없이 별도의 기능을 추가할 수 있는 추가 솔루션은 ahref 선택기를 사용하는 것입니다(필요한 경우 추가 선택기와 함께 사용할 수 있음).

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

데모를 하다

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

});

이것이 누군가에게 도움이 되길 바랍니다.

이것은 저에게 효과가 있었습니다.

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

저는 다른 접근법을 사용합니다.

모두 찾기만 하면 됩니다.a어디에id어떤 하위 문자열에서 시작합니다.

제이에스

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

HTML

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

부트스트랩 5 탭에 대한 Gerben Rampaart와 유사한 답변입니다.설명서의 현재 탭 HTML과 몇 가지 차이점이 있습니다.

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>

<nav>
  <div class="nav nav-tabs" id="nav-tab" role="tablist">
<button class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">Home</button>
<button class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" data-bs-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</button>
<button class="nav-link" id="nav-contact-tab" data-bs-toggle="tab" data-bs-target="#nav-contact" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</button>
  </div>
</nav>
<div class="tab-content" id="nav-tabContent">
  <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">...</div>
  <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">...</div>
  <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">...</div>
</div>

언급URL : https://stackoverflow.com/questions/20705905/bootstrap-3-jquery-event-for-active-tab-change