How To Open Specific Tab Of Bootstrap Nav Tabs On Click Of A Particuler Link Using Jquery

Bootstrap is a popular framework for building responsive and interactive websites, and one common feature you'll often find in web design is the use of nav tabs. These tabs not only help in organizing content but also provide a neat way to navigate different sections of a webpage. In this guide, we will show you how to open a specific tab of Bootstrap nav tabs by clicking on a particular link using jQuery.

First things first, make sure you have included the necessary Bootstrap and jQuery libraries in your project. You can easily add these by including the following CDN links in your HTML file:

Html

<!-- Bootstrap CSS -->

<!-- jQuery -->

<!-- Bootstrap JS -->

Next, let's set up your Bootstrap nav tabs structure:

Html

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact">Contact</a>
  </li>
</ul>

<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
  <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div>
</div>

In this example, we have three nav tabs (Home, Profile, and Contact) with corresponding content sections. Now, let's add the jQuery script to trigger the tab switch based on a particular link click:

Javascript

$(document).ready(function(){
  // Trigger tab switch on link click
  $('a[data-toggle="tab"]').on('click', function(){
    var targetTab = $(this).attr('href');
    $('.nav-link').removeClass('active');
    $(this).addClass('active');
    $('.tab-pane').removeClass('show active');
    $(targetTab).addClass('show active');
  });
});

In the above jQuery script, we are listening for clicks on any tab link (``) and then fetching the target tab's ID for switching the active classes accordingly.

By following these steps and integrating the provided code snippets into your project, you can easily achieve the functionality of opening a specific tab of Bootstrap nav tabs by clicking on a particular link using jQuery. This approach adds a layer of interactivity and enhances user experience on your website.

Feel free to customize and expand upon this basic setup to suit your specific design requirements. Experiment with different styles, transitions, and effects to create a seamless and engaging tab navigation system for your web projects.

Related posts:

Contact Info