JavaScript callback for Bootstrap 5 tabs selection

If you're using Bootstrap 5 and need to trigger custom JavaScript code when a user selects a tab, the shown.bs.tab event is what you need. This event fires when a new tab is shown and the transition to the tab content is complete. Below, we provide a step-by-step example to help you achieve this.

HTML Structure for Tabs

Here's an example of a basic Bootstrap 5 tabs structure:

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">Contact</button>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">Home Content</div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">Profile Content</div>
  <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">Contact Content</div>
</div>

JavaScript Callback for Tab Selection

Use the following JavaScript code to add a callback that triggers when a tab is selected:

document.addEventListener("DOMContentLoaded", function () {
  const tabs = document.querySelectorAll('[data-bs-toggle="tab"]');

  tabs.forEach(tab => {
    tab.addEventListener("shown.bs.tab", function (event) {
      // Callback logic when a tab is selected
      const selectedTab = event.target; // The clicked tab element
      const previousTab = event.relatedTarget; // The previously active tab

      console.log("Selected Tab ID:", selectedTab.id);
      console.log("Previous Tab ID:", previousTab ? previousTab.id : "None");
    });
  });
});

Explanation

shown.bs.tab: This event is fired when a new tab is fully visible.
event.target: Refers to the tab that was activated.
event.relatedTarget: Refers to the tab that was deactivated (if any).

Complete Example

Here's the complete code for both HTML and JavaScript:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap Tabs Callback</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <ul class="nav nav-tabs" id="myTab" role="tablist">
    <li class="nav-item" role="presentation">
      <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
    </li>
    <li class="nav-item" role="presentation">
      <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
    </li>
    <li class="nav-item" role="presentation">
      <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">Contact</button>
    </li>
  </ul>
  <div class="tab-content" id="myTabContent">
    <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">Home Content</div>
    <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">Profile Content</div>
    <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">Contact Content</div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  <script>
    document.addEventListener("DOMContentLoaded", function () {
      const tabs = document.querySelectorAll('[data-bs-toggle="tab"]');

      tabs.forEach(tab => {
        tab.addEventListener("shown.bs.tab", function (event) {
          const selectedTab = event.target;
          const previousTab = event.relatedTarget;

          console.log("Selected Tab ID:", selectedTab.id);
          console.log("Previous Tab ID:", previousTab ? previousTab.id : "None");
        });
      });
    });
  </script>
</body>
</html>

Conclusion

By using the shown.bs.tab event, you can seamlessly add custom functionality to your tabs in Bootstrap 5. This approach is simple, clean, and leverages Bootstrap's powerful event system.

Programação e games

Pesquisar este blog