Imtiaz Rayhan

How To Create Tabbed Content With HTML and JavaScript

·

Imtiaz Rayhan

Tabs in web pages are a common user interface element that allows users to switch between different sections of content on a webpage. Tabs are typically organized horizontally and each tab represents a different section of content.

When a user clicks on a tab, the corresponding section of content is shown and the other tabs are hidden. This allows users to easily navigate and access different sections of content on a webpage.

To create HTML tabs with JavaScript, we can use a combination of HTML and JavaScript to create the tabbed content.

Here is an example of creating HTML tabs with JavaScript. First the HTML:

<div id="tabs">
  <button class="tab" data-tab="tab-1">Tab 1</button>
  <button class="tab" data-tab="tab-2">Tab 2</button>
  <button class="tab" data-tab="tab-3">Tab 3</button>

  <div id="tab-1" class="tab-content">
    Tab 1 content goes here...
  </div>
  <div id="tab-2" class="tab-content">
    Tab 2 content goes here...
  </div>
  <div id="tab-3" class="tab-content">
    Tab 3 content goes here...
  </div>
</div>

Now let’s look into the JavaScript that will make these tabs work.

var tabs = document.querySelectorAll('.tab');

tabs.forEach(function(tab) {
  tab.addEventListener('click', function() {
    var tabId = this.dataset.tab;
    var tabContent = document.querySelector('#' + tabId);

    tabs.forEach(function(tab) {
      tab.classList.remove('active');
    });

    // Hide all tab content before showing the active tab content
    var tabContents = document.querySelectorAll('.tab-content');
    tabContents.forEach(function(tabContent) {
      tabContent.classList.remove('active');
    });

    tabContent.classList.add('active');
  });
});

// Set the first tab as active when the page loads
var firstTab = tabs[0];
firstTab.classList.add('active');

var firstTabContent = document.querySelector('#' + firstTab.dataset.tab);
firstTabContent.classList.add('active');

In the code, an HTML tabbed interface is being created using a combination of HTML, CSS, and JavaScript.

The HTML defines the tabbed interface and the tabs and tab content. The CSS is used to hide the tab content by default, and only show the content for the active tab. The JavaScript is used to add click event listeners to the tabs, which handle switching the active tab and showing the corresponding tab content.

When the page loads, the first tab is set as active and the corresponding tab content is shown. When the user clicks on a tab, the active tab is changed and the corresponding tab content is shown. This allows the user to switch between tabs and see the corresponding tab content.

The code also ensures that only one tab content is shown at a time, and the previous tab content is hidden when a new tab is selected. This creates a functional tabbed interface using JavaScript.

I hope this helps! Let me know if you have any questions.

In:

,