Tab navigation via JavaScript in Bootsrap - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to select the tab element by its ID.

Bootsrap

const tabTrigger = document.getElementById('[1]');

Drag options to blanks, or click blank then click option'

AtabTrigger

Btab1

Cnav-tab

DmyTab

Attempts:

3 left

💡 Hint

Common Mistakes

Using a class name instead of an ID.

Forgetting to use quotes around the ID string.

The getElementById method selects the element with the specified ID. Here, the tab's ID is tab1.

2fill in blank

medium

Complete the code to create a new Bootstrap Tab instance for the selected element.

Bootsrap

const tab = new bootstrap.Tab([1]);

Drag options to blanks, or click blank then click option'

Adocument.getElementById('tab1')

Bdocument.querySelector('.nav-link')

CtabTrigger

Ddocument.querySelector('#tab1')

Attempts:

3 left

💡 Hint

Common Mistakes

Passing a selector string instead of an element.

Using a different variable name that is undefined.

The variable tabTrigger already holds the tab element, so we pass it directly to bootstrap.Tab.

3fill in blank

hard

Fix the error in the code to show the tab programmatically.

Bootsrap

tab.[1]();

Drag options to blanks, or click blank then click option'

Ashow

Bdisplay

Copen

Dactivate

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'activate' which is not a Bootstrap Tab method.

Using 'display' or 'open' which do not exist on the Tab object.

The correct method to show a Bootstrap tab programmatically is show().

4fill in blank

hard

Fill both blanks to add a click event listener that shows the tab when clicked.

Bootsrap

tabTrigger.addEventListener('[1]', () => { tab.[2](); });

Drag options to blanks, or click blank then click option'

Aclick

Bmouseover

Cshow

Ddisplay

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'mouseover' instead of 'click' for the event.

Using 'display' instead of 'show' for the method.

The event to listen for is click, and the method to show the tab is show().

5fill in blank

hard

Fill all three blanks to select a tab by CSS selector, create a Tab instance, and show it.

Bootsrap

const tabElement = document.querySelector('[1]');
const tabInstance = new bootstrap.Tab([2]);
tabInstance.[3]();

Drag options to blanks, or click blank then click option'

A#profile-tab

BtabElement

Cshow

D.nav-link

Attempts:

3 left

💡 Hint

Common Mistakes

Using a class selector instead of an ID selector.

Passing the selector string instead of the element to bootstrap.Tab.

Calling a wrong method instead of 'show()'.

We select the tab with ID #profile-tab, pass the element variable tabElement to create the Tab instance, then call show() to display it.

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