Creating a Horizontal Tabs Component with HTML, CSS, and JavaScript: Step-by-Step Tutorial

HTML:

<div class="tabs-container">
  <div class="tab" onclick="changeTab(0)">Tab 1</div>
  <div class="tab" onclick="changeTab(1)">Tab 2</div>
  <div class="tab" onclick="changeTab(2)">Tab 3</div>
</div>
<div class="tab-content">
  <div class="tab-pane" id="tab1">Content for Tab 1</div>
  <div class="tab-pane" id="tab2">Content for Tab 2</div>
  <div class="tab-pane" id="tab3">Content for Tab 3</div>
</div>

CSS:

.tabs-container {
  display: flex;
}

.tab {
  cursor: pointer;
  padding: 10px;
  background-color: lightgray;
  border: 1px solid gray;
  flex: 1;
  text-align: center;
}

.tab:hover {
  background-color: gray;
  color: white;
}

.tab-content {
  margin-top: 10px;
}

.tab-pane {
  display: none;
}

.tab-pane.active {
  display: block;
}

JavaScript:

let currentTab = 0; // Initialize the current tab index

// Function to change tabs
function changeTab(index) {
  // Hide the currently active tab content
  document.getElementById(`tab${currentTab + 1}`).style.display = "none";
  
  // Remove the active class from the currently active tab
  document.getElementById(`tab${currentTab + 1}`).classList.remove("active");
  
  // Update the current tab index
  currentTab = index;
  
  // Show the selected tab content
  document.getElementById(`tab${currentTab + 1}`).style.display = "block";
  
  // Add the active class to the selected tab
  document.getElementById(`tab${currentTab + 1}`).classList.add("active");
}

In the example above, we create a tabs component with three tabs (Tab 1, Tab 2, and Tab 3). Each tab is associated with a corresponding content pane. When a tab is clicked, the changeTab() function is called with the index of the clicked tab as an argument. The changeTab() function hides the currently active tab content, removes the active class from the currently active tab, updates the current tab index, shows the selected tab content, and adds the active class to the selected tab. The CSS is used to style the tabs and content panes, and the JavaScript is used to handle the tab switching logic.

Here’s an example of how you can code a horizontal tabs component using HTML, CSS, and jQuery, which is a popular JavaScript library:

HTML:

<div class="tabs-container">
  <div class="tab" data-tab="tab1">Tab 1</div>
  <div class="tab" data-tab="tab2">Tab 2</div>
  <div class="tab" data-tab="tab3">Tab 3</div>
</div>
<div class="tab-content">
  <div class="tab-pane" id="tab1">Content for Tab 1</div>
  <div class="tab-pane" id="tab2">Content for Tab 2</div>
  <div class="tab-pane" id="tab3">Content for Tab 3</div>
</div>

CSS:

.tabs-container {
  display: flex;
}

.tab {
  cursor: pointer;
  padding: 10px;
  background-color: lightgray;
  border: 1px solid gray;
  flex: 1;
  text-align: center;
}

.tab:hover {
  background-color: gray;
  color: white;
}

.tab-content {
  margin-top: 10px;
}

.tab-pane {
  display: none;
}

.tab-pane.active {
  display: block;
}

JQuery:

$(document).ready(function() {
  let currentTab = 0; // Initialize the current tab index

  // Function to change tabs
  $(".tab").on("click", function() {
    // Hide the currently active tab content
    $(`#tab${currentTab + 1}`).hide();
    
    // Remove the active class from the currently active tab
    $(`.tab[data-tab=tab${currentTab + 1}]`).removeClass("active");
    
    // Update the current tab index
    currentTab = $(this).index();
    
    // Show the selected tab content
    $(`#tab${currentTab + 1}`).show();
    
    // Add the active class to the selected tab
    $(`.tab[data-tab=tab${currentTab + 1}]`).addClass("active");
  });
});

In this example, we use the jQuery library to simplify the handling of DOM manipulation and event handling. The HTML and CSS remain the same as in the previous example, but the JavaScript code is modified to use jQuery methods. The $(document).ready() function ensures that the code is executed when the document is fully loaded. The .on("click") method is used to attach a click event handler to the tabs. Inside the event handler function, we use various jQuery methods such as .hide(), .show(), .index(), .removeClass(), and .addClass() to achieve the same functionality as before, but with jQuery.