bootstrap tabs click event jquery
To handle a click event on Bootstrap tabs using jQuery, you can use the click
event handler in jQuery to detect when a tab is clicked. Here's an example code snippet:
$(document).ready(function(){
$('.nav-tabs a').click(function(){
// Get the target tab's ID
var tabId = $(this).attr('href');
// Hide all tab content
$('.tab-content .tab-pane').removeClass('active');
// Show the selected tab content
$(tabId).addClass('active');
});
});
In this code, we first wait for the document to be ready using $(document).ready()
. Then, we attach a click event handler to all the <a>
elements inside the .nav-tabs
class. When a tab is clicked, we retrieve the ID of the target tab using $(this).attr('href')
. We then remove the active
class from all tab content using $('.tab-content .tab-pane').removeClass('active')
, and finally, we add the active
class to the selected tab content using $(tabId).addClass('active')
.
Please note that you need to have the Bootstrap and jQuery libraries included in your HTML file for this code to work.