<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Show Bootstrap Tab Using jQuery</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script> <script> $(document).ready(function(){ $("#myTab a:last").tab("show"); // show last tab }); </script> </head> <body> <div class="m-4"> <ul class="nav nav-tabs" id="myTab"> <li class="nav-item"> <a href="#home" class="nav-link active" data-bs-toggle="tab">Home</a> </li> <li class="nav-item"> <a href="#profile" class="nav-link" data-bs-toggle="tab">Profile</a> </li> <li class="nav-item"> <a href="#messages" class="nav-link" data-bs-toggle="tab">Messages</a> </li> </ul> <div class="tab-content"> <div class="tab-pane fade show active" id="home"> <h4 class="mt-2">Home tab content</h4> <p>You will discover in this article how to use the Bootstrap tabs plugins to build dynamic tabs that may switch between the content.When using tab-based navigation, you can divide up a large quantity of material into manageable panes that can be seen one at a time. This is a great method for handling a lot of content in a small space.Changing between the panes allows users to easily access the material without leaving the website. Utilising the Bootstrap tab component, the next examples will demonstrate how you make the fundamental tabs.</p> </div> <div class="tab-pane fade" id="profile"> <h4 class="mt-2">Profile tab content</h4> <p>This is a great method for handling a lot of content in a small space.Changing between the panes allows users to easily access the material without leaving the website. Utilising the Bootstrap tab component, the next examples will demonstrate how you make the fundamental tabs.You will discover in this article how to use the Bootstrap tabs plugins to build dynamic tabs that may switch between the content.When using tab-based navigation, you can divide up a large quantity of material into manageable panes that can be seen one at a time.</p> </div> <div class="tab-pane fade" id="messages"> <h4 class="mt-2">Messages tab content</h4> <p>To further understand how to use data attributes to generate dynamic tabs, lets look at an instance.You will discover in this article how to use the Bootstrap tabs plugins to build dynamic tabs that may switch between the content.When using tab-based navigation, you can divide up a large quantity of material into manageable panes that can be seen one at a time.Changing between the panes allows users to easily access the material without leaving the website. Utilising the Bootstrap tab component, the next examples will demonstrate how you make the fundamental tabs.</p> </div> </div> </div> </body> </html>