Tab navigation via JavaScript in Bootsrap

Introduction

Tabs help organize content in small spaces. Using JavaScript to switch tabs lets users see different content without reloading the page.

You want to show different sections like 'Profile', 'Settings', and 'Messages' in one area.

You want users to switch views quickly without waiting for a page reload.

You want to control which tab is active based on user actions or events.

You want to create a step-by-step form where each step is a tab.

You want to improve user experience by showing content in a clean, organized way.

Syntax

Bootsrap

var tabTrigger = new bootstrap.Tab(document.querySelector('#myTab button[data-bs-target="#profile"]'));
tabTrigger.show();

Use new bootstrap.Tab(element) to create a tab object for the tab button element.

Call show() on the tab object to activate that tab and show its content.

Examples

This activates the first tab in the tab list.

Bootsrap

var firstTab = new bootstrap.Tab(document.querySelector('#myTab button:first-child'));
firstTab.show();

This activates the tab that shows the 'Profile' content.

Bootsrap

var profileTab = new bootstrap.Tab(document.querySelector('#myTab button[data-bs-target="#profile"]'));
profileTab.show();

This listens for a click on the 'Settings' tab button and activates it using JavaScript.

Bootsrap

document.querySelector('#myTab button[data-bs-target="#settings"]').addEventListener('click', function () {
  var settingsTab = new bootstrap.Tab(this);
  settingsTab.show();
});

Sample Program

This example shows three tabs: Home, Profile, and Contact. The Home tab is active by default. When you click the "Go to Profile Tab" button, JavaScript activates the Profile tab and shows its content without reloading the page.

Bootsrap

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Bootstrap Tab Navigation via JavaScript</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
  <main class="container mt-4">
    <h1>Tab Navigation Example</h1>
    <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 p-3 border border-top-0" id="myTabContent">
      <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
        <p>Welcome to the Home tab content.</p>
      </div>
      <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
        <p>This is the Profile tab content.</p>
      </div>
      <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
        <p>Here is the Contact tab content.</p>
      </div>
    </div>
    <button id="goProfile" class="btn btn-primary mt-3">Go to Profile Tab</button>
  </main>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  <script>
    // When the button is clicked, activate the Profile tab using JavaScript
    document.getElementById('goProfile').addEventListener('click', () => {
      const profileTabTrigger = new bootstrap.Tab(document.querySelector('#myTab button[data-bs-target="#profile"]'));
      profileTabTrigger.show();
    });
  </script>
</body>
</html>

Important Notes

Make sure to include Bootstrap's JavaScript bundle for tab functionality.

Use semantic roles and aria attributes for accessibility, like role="tablist" and aria-selected.

JavaScript tab activation is useful for dynamic user interactions beyond just clicking tabs.

Summary

Tabs organize content in small spaces and improve user experience.

Use new bootstrap.Tab(element).show() to switch tabs with JavaScript.

Always include proper accessibility attributes for better keyboard and screen reader support.

Practice

1. What does the JavaScript method new bootstrap.Tab(element).show() do in Bootstrap tab navigation?

easy

A. It hides all tabs and disables tab navigation.

B. It removes the tab element from the page.

C. It creates a new tab element but does not display it.

D. It activates and displays the tab content linked to the given tab element.

Solution

1. Step 1: Understand the method purpose

   The method new bootstrap.Tab(element).show() is designed to activate a specific tab.

2. Step 2: Effect on tab content

   Calling show() displays the content linked to the tab and marks the tab as active.

3. Final Answer:

   It activates and displays the tab content linked to the given tab element. -> Option D

4. Quick Check:

   Tab activation = show() method [OK]

Hint: Remember: show() makes the tab visible and active [OK]

Common Mistakes:

• Thinking show() hides tabs
• Confusing tab creation with activation
• Assuming show() removes elements

2. Which of the following is the correct way to activate a Bootstrap tab with JavaScript?

easy

A. bootstrap.showTab(element)

B. bootstrap.Tab.show(element)

C. new bootstrap.Tab(element).show()

D. element.showTab()

Solution

1. Step 1: Recall Bootstrap tab activation syntax

   The correct syntax requires creating a new Tab instance with new bootstrap.Tab(element).

2. Step 2: Call the show() method on the instance

   After creating the instance, call .show() to activate the tab.

3. Final Answer:

   new bootstrap.Tab(element).show() -> Option C

4. Quick Check:

   Correct syntax = new + Tab + show() [OK]

Hint: Use 'new bootstrap.Tab(element).show()' to activate tabs [OK]

Common Mistakes:

• Omitting 'new' keyword
• Calling show() directly on bootstrap.Tab
• Using non-existent methods like showTab()

3. Given the following HTML and JavaScript, what tab content will be visible after the script runs?

<ul class="nav nav-tabs" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="home-tab" data-bs-toggle="tab" href="#home" role="tab">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-bs-toggle="tab" href="#profile" role="tab">Profile</a>
  </li>
</ul>
<div class="tab-content">
  <div class="tab-pane fade show active" id="home" role="tabpanel">Home Content</div>
  <div class="tab-pane fade" id="profile" role="tabpanel">Profile Content</div>
</div>

<script>
  var profileTab = document.querySelector('#profile-tab');
  var tab = new bootstrap.Tab(profileTab);
  tab.show();
</script>

medium

A. Home Content is visible

B. Profile Content is visible

C. Both Home and Profile Content are visible

D. No content is visible

Solution

1. Step 1: Identify the tab activated by JavaScript

   The script selects the element with id profile-tab and calls show() on it.

2. Step 2: Understand tab content visibility

   Calling show() activates the Profile tab and displays its content, hiding the Home content.

3. Final Answer:

   Profile Content is visible -> Option B

4. Quick Check:

   tab.show() switches to Profile tab [OK]

Hint: show() switches active tab content to selected tab [OK]

Common Mistakes:

• Assuming original active tab stays visible
• Thinking both tabs show simultaneously
• Ignoring the effect of tab.show()

4. What is wrong with this JavaScript code snippet for activating a Bootstrap tab?

var tabTrigger = document.getElementById('settings-tab');
tabTrigger.show();

medium

A. The element does not have a show() method directly; must create a Tab instance first.

B. The getElementById method is incorrect; should use querySelector.

C. The tabTrigger variable is undefined because the ID is wrong.

D. The show() method should be called before selecting the element.

Solution

1. Step 1: Check method usage on DOM element

   The DOM element returned by getElementById does not have a show() method.

2. Step 2: Correct way to activate tab

   You must create a Bootstrap Tab instance with new bootstrap.Tab(tabTrigger) before calling show().

3. Final Answer:

   The element does not have a show() method directly; must create a Tab instance first. -> Option A

4. Quick Check:

   Must use new bootstrap.Tab(element) before show() [OK]

Hint: Always create new bootstrap.Tab(element) before calling show() [OK]

Common Mistakes:

• Calling show() directly on DOM element
• Confusing querySelector with getElementById
• Assuming show() is a native DOM method

5. You want to create a tab navigation where clicking a button activates the 'Settings' tab using JavaScript. Which code snippet correctly achieves this?

<button id="activate-settings">Go to Settings</button>
<ul class="nav nav-tabs" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="home-tab" data-bs-toggle="tab" href="#home" role="tab">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="settings-tab" data-bs-toggle="tab" href="#settings" role="tab">Settings</a>
  </li>
</ul>
<div class="tab-content">
  <div class="tab-pane fade show active" id="home" role="tabpanel">Home Content</div>
  <div class="tab-pane fade" id="settings" role="tabpanel">Settings Content</div>
</div>

<script>
  // Which code activates the Settings tab on button click?
</script>

hard

A. document.getElementById('activate-settings').addEventListener('click', () => {
new bootstrap.Tab(document.getElementById('settings-tab')).show();
});

B. document.getElementById('activate-settings').onclick = function() {
document.getElementById('settings-tab').show();
};

C. document.querySelector('#activate-settings').addEventListener('click', () => {
bootstrap.Tab.show(document.querySelector('#settings-tab'));
});

D. document.querySelector('#activate-settings').onclick = () => {
document.querySelector('#settings-tab').show();
};

Solution

1. Step 1: Identify correct event listener setup

   Using addEventListener('click', ...) is a standard way to handle button clicks.

2. Step 2: Properly activate the tab

   Creating a new bootstrap.Tab instance for the 'settings-tab' element and calling show() activates the tab correctly.

3. Final Answer:

   document.getElementById('activate-settings').addEventListener('click', () => { new bootstrap.Tab(document.getElementById('settings-tab')).show(); }); -> Option A

4. Quick Check:

   Use new Tab + show() inside click listener [OK]

Hint: Use new bootstrap.Tab(element).show() inside click event [OK]

Common Mistakes:

• Calling show() directly on DOM element
• Using non-existent bootstrap.Tab.show() method
• Using click() instead of show() to activate tab