Tab navigation via JavaScript in Bootsrap - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

How does Bootstrap's JavaScript activate a tab?

In Bootstrap, when you want to switch tabs using JavaScript, which method is used to activate a tab element?

A Use <code>document.querySelector(tab).activate()</code> method

B Call the <code>tab('show')</code> method on the tab's jQuery object

C Add the class <code>active</code> directly to the tab element

D Trigger a <code>click</code> event on the tab element

💡 Hint

Bootstrap uses a special method to handle tab activation and related content changes.

Bootstrap's JavaScript provides a tab('show') method that you call on the tab element's jQuery object to activate it properly. Simply adding the active class or triggering a click event won't update the tab content correctly.

📝 Syntax

intermediate

Which JavaScript code correctly activates the second tab in Bootstrap?

Given this HTML snippet with Bootstrap tabs:

<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>

Which JavaScript snippet correctly activates the Profile tab using Bootstrap 5's JavaScript API?

A var tabTrigger = new bootstrap.Tab(document.querySelector('#profile-tab')); tabTrigger.show();

B document.querySelector('#profile-tab').click();

C $('#profile-tab').tab('activate');

D bootstrap.activateTab('#profile-tab');

💡 Hint

Bootstrap 5 uses a JavaScript class to control tabs instead of jQuery methods.

Bootstrap 5 uses the bootstrap.Tab class. You create a new instance with the tab element and call show() to activate it. The jQuery method tab('activate') does not exist in Bootstrap 5.

❓ rendering

advanced

What is the visible result after activating a tab via JavaScript?

If you activate the Profile tab using Bootstrap's JavaScript, what will the user see in the browser?

A Only the Profile tab label changes color, but the content remains the same as Home.

B Both Home and Profile content panels are visible simultaneously.

C The Profile tab label becomes highlighted and the Profile content panel is shown, while the Home content is hidden.

D The page reloads and shows the Profile tab content.

💡 Hint

Tabs show one content panel at a time matching the active tab.

Activating a tab highlights its label and shows its associated content panel. The previously active tab's content is hidden. Bootstrap handles this automatically when you call show() on a tab.

❓ selector

advanced

Which CSS selector targets the active tab link in Bootstrap?

In Bootstrap tabs, which CSS selector correctly selects the currently active tab link?

A .nav-link.active

B .nav-item.active

C .tab-pane.active

D .nav-link[aria-selected="true"]

💡 Hint

The active tab link has a special class added to it.

The active tab link in Bootstrap has the class active on the .nav-link element. The .nav-item does not get active class, and .tab-pane is for content panels, not tab links.

❓ accessibility

expert

Which ARIA attribute ensures screen readers announce the active tab correctly?

In Bootstrap tab navigation, which ARIA attribute on the tab link indicates it is the currently selected tab for screen readers?

A aria-checked="true"

B aria-hidden="false"

C aria-expanded="true"

D aria-selected="true"

💡 Hint

This attribute tells assistive technology which tab is active.

The aria-selected="true" attribute on the active tab link signals to screen readers that this tab is currently selected. Other attributes like aria-expanded or aria-checked are not used for tabs.

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