Tab navigation via JavaScript in Bootsrap - Mini Project: Build & Apply

Tab navigation via JavaScript

📖 Scenario: You are building a simple webpage with tabs to show different content sections. Users can click on tabs to switch the visible content. You will use Bootstrap's tab structure and JavaScript to control the tab navigation.

🎯 Goal: Create a tab navigation interface using Bootstrap markup and write JavaScript code to switch tabs when users click on tab buttons. The page should show the correct content for the active tab and highlight the active tab button.

📋 What You'll Learn

Use Bootstrap 5 tab markup with nav and tab-content sections

Create three tabs named Home, Profile, and Messages

Write JavaScript to listen for clicks on tab buttons and show the corresponding tab content

Highlight the active tab button with Bootstrap's active class

Ensure only one tab content is visible at a time

💡 Why This Matters

🌍 Real World

Tabs are common in websites and apps to organize content in a small space. Knowing how to build accessible tabs with JavaScript helps create better user experiences.

💼 Career

Front-end developers often implement tab navigation components. Understanding Bootstrap markup and JavaScript event handling is essential for building interactive UI elements.

1

Create the HTML structure for tabs

Create a nav element with class nav nav-tabs containing three button elements with classes nav-link. The buttons should have IDs tab-home, tab-profile, and tab-messages and text content Home, Profile, and Messages respectively. Also create a div with class tab-content containing three div elements with classes tab-pane. These panes should have IDs home, profile, and messages and contain the text Welcome to Home, User Profile Info, and Your Messages respectively.

Bootsrap

# Create the nav tabs and tab content divs with the exact IDs and classes
# Your code here

Hint

Use Bootstrap's tab markup with nav nav-tabs for the tab buttons and tab-content with tab-pane for the content sections. Assign the exact IDs as given.

2

Set the initial active tab and content

Add the active class to the Home tab button with ID tab-home and to the home tab pane. Also set the attribute aria-selected="true" on the tab-home button and aria-selected="false" on the other tab buttons.

Bootsrap

  Home
  Profile
  Messages


  Welcome to Home
  User Profile Info
  Your Messages



# Your code here

Hint

Add the active class to the Home tab button and the Home tab pane. Also set aria-selected="true" on the Home tab button and aria-selected="false" on the others.

3

Write JavaScript to switch tabs on click

Write JavaScript code that selects all elements with class nav-link. Add a click event listener to each button. When clicked, remove the active class from all tab buttons and tab panes, set aria-selected="false" on all tab buttons, then add the active class to the clicked button and the corresponding tab pane. Also set aria-selected="true" on the clicked button. Use the clicked button's aria-controls attribute to find the matching tab pane by ID.

Bootsrap

  Home
  Profile
  Messages


  Welcome to Home
  User Profile Info
  Your Messages



// Add event listeners to nav-link buttons to switch tabs
// Your code here

Hint

Use document.querySelectorAll('.nav-link') to get all tab buttons. Add a click listener to each. Inside the listener, remove active and set aria-selected to false on all tabs, hide all tab panes, then activate the clicked tab and its pane using aria-controls.

4

Add accessibility and responsive improvements

Add the attribute tabindex="0" to all tab buttons to make them keyboard focusable. Also add aria-labelledby attributes to each tab pane referencing the corresponding tab button's ID. Wrap the entire tab navigation and content inside a section element with aria-label="Main Tabs Navigation".

Bootsrap

  Home
  Profile
  Messages


  Welcome to Home
  User Profile Info
  Your Messages




const tabs = document.querySelectorAll('.nav-link');
tabs.forEach(tab => {
  tab.addEventListener('click', () => {
    tabs.forEach(t => {
      t.classList.remove('active');
      t.setAttribute('aria-selected', 'false');
    });
    const panes = document.querySelectorAll('.tab-pane');
    panes.forEach(pane => pane.classList.remove('active'));
    tab.classList.add('active');
    tab.setAttribute('aria-selected', 'true');
    const targetId = tab.getAttribute('aria-controls');
    const targetPane = document.getElementById(targetId);
    if (targetPane) {
      targetPane.classList.add('active');
    }
  });
});



# Your code here

Hint

Wrap the tabs and content in a section with aria-label. Add tabindex="0" to each tab button for keyboard focus. Add aria-labelledby to each tab pane referencing the matching tab button's ID.

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