Sự kiện jquery Bootstrap 3 để thay đổi tab hoạt động

Tôi đã dành một lượng thời gian không thực tế để cố gắng kích hoạt một chức năng khi tab thay đổi của tab bootstrap 3 / thanh điều hướng và theo nghĩa đen, tất cả các đề xuất google spat out đều sai / không hoạt động.

Làm thế nào để đi về điều này?

Chỉnh sửa meta: xem bình luận

Eric Saupe biết cách làm điều đó

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

vấn đề là attr ('href') không bao giờ trống.

Hoặc để so sánh giá trị #id = "#some" và sau đó gọi ajax.

Nhờ bài đăng của @ Gerben biết rằng có hai sự kiện show.bs.tab (trước khi tab được hiển thị) và shows.bs.tab (sau khi tab được hiển thị) như được giải thích trong tài liệu - Sử dụng Tab Bootstrap

Một giải pháp bổ sung nếu chúng tôi chỉ quan tâm đến một tab cụ thể và có thể thêm các chức năng riêng biệt mà không phải thêm khối if - khác trong một chức năng, là sử dụng bộ chọn a href (có thể cùng với bộ chọn bổ sung nếu được yêu cầu)

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

bản giới thiệu

Để thêm vào câu trả lời của Mosh Feu, nếu các tab được tạo nhanh như trong trường hợp của tôi, bạn sẽ sử dụng mã sau đây

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

});

tôi hi vọng điêu nay se giup được ai đo

Điều này làm việc cho tôi.

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

Tôi sử dụng một cách tiếp cận khác.

Chỉ cần cố gắng tìm tất cả anơi idbắt đầu từ một số chuỗi con .

Mã não

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