Thay đổi tab Bootstrap 3 đang hoạt động bằng cách sử dụng jQuery

Question

Tôi đã thử nghiệm với các tab thay đổi có lập trình bằng cách sử dụng jQuery. Tôi đã cố gắng thực hiện giải pháp được đưa ra bởi @MasterAM here. Tuy nhiên, giao diện điều khiển Chrome sẽ hiển thị các lỗi Uncaught TypeError: undefined is not a function

Đây là HTML của tôi:

<div id="click-me-div">Click Me</div> 

<ul class="nav nav-tabs"> 
    <li class="active"><a href="#fruits" data-toggle="tab">I like Fruits</a></li> 
    <li><a href="#veggies" data-toggle="tab">I like Veggies Too</a></li> 
    <li><a href="#samosas" data-toggle="tab">But Samosa's Rock</a></li> 
</ul> 

<div class="tab-content"> 
    <div class="tab-pane active" id="fruits">Apple, Kiwi, Watermellon</div> 
    <div class="tab-pane" id="veggies">Kale, Spinach, Pepper</div> 
    <div class="tab-pane" id="samosas">Awesome, Spine Tingling, Explosive</div> 
</div> 

Và đây là jQuery:

$(document).ready(function() { 
    $("#click-me-div").click(function() { 
     alert('yes, the click actually happened'); 
     ('.nav-tabs a[href="#samosas"]').tab('show'); 
    }); 
}); 

Các kết quả mong muốn là, nếu tôi bấm vào nút "Click Me ", tab hoạt động sẽ thay đổi thành tab" samosas ".

Tôi đang làm gì sai?

Answer 1

Bạn còn lại ra jQuery chức năng

$(document).ready(function() { 
    $("#click-me-div").click(function() { 
     alert('yes, the click actually happened'); 
     $('.nav-tabs a[href="#samosas"]').tab('show'); 
    }); 
}); 

Fiddle

Answer 2

Hãy thử mã này

Bạn có thể sử dụng chức năng onclick() và đường dẫn tên id của tab.

<a onclick='ActivTab("Security")' class="nav-link" data-toggle="tab" href="#Security" aria-controls="profile" role="tab" id='Security'>Security</a> 


    <script> 
     $(document).ready(function(){ 
      ActivTab('Security'); 
     }); 
     function ActivTab(id){ 
//   $('.nav-tabs a[href="#' + id + '"]').tab('show'); 
      $('.nav-tabs a[href="#' + id + '"]').trigger('click'); 
     }; 
    </script>