How to make javaScript tabs

Learn how to create tabs using JavaScript, with a simple example included.

Creating JavaScript Tabs with HTML and CSS

Creating tabs with JavaScript requires HTML, CSS, and JavaScript. To demonstrate, let's create a simple HTML page with three tabs.

First, let's create the HTML for the tabs. Insert the following code into your HTML document:

<div class="tabs">
  <ul>
    <li><a href="#tab1">Tab 1</a></li>
    <li><a href="#tab2">Tab 2</a></li>
    <li><a href="#tab3">Tab 3</a></li>
  </ul>
  <div id="tab1">
    <p>This is tab 1.</p>
  </div>
  <div id="tab2">
    <p>This is tab 2.</p>
  </div>
  <div id="tab3">
    <p>This is tab 3.</p>
  </div>
</div>

In the code above, we have a <div> element with a class of "tabs". Inside the <div> element, we have an unordered list of links that will be used to control the tabs. Each link has a href attribute that points to a corresponding <div> element with an id of either "tab1", "tab2", or "tab3".

Next, let's add some CSS to style the tabs. Insert the following code into your HTML document:

.tabs {
  display: flex;
  justify-content: space-between;
}

.tabs ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.tabs a {
  text-decoration: none;
  color: #666;
  font-weight: bold;
}

.tabs a:hover {
  color: #333;
}

.tabs div {
  display: none;
  background-color: #f1f1f1;
  padding: 10px;
}

.tabs div:target {
  display: block;
}

In the code above, we are setting the display of the <div> element with a class of "tabs" to flex, which will allow us to space out the tabs evenly. We are then setting the style of the unordered list and the links, and then setting the style of the <div> elements to display: none, which will hide them until they are activated by a link. Finally, we are setting the #tab1, #tab2, and #tab3 <div> elements to display: block when they are targeted, which will make them visible.

Finally, let's add some JavaScript to make the tabs interactive. Insert the following code into your HTML document:

const tabs = document.querySelector(".tabs");
const tablinks = tabs.querySelectorAll("a");

function switchTab(event) {
  event.preventDefault();
  const currentTab = document.querySelector(event.target.getAttribute("href"));
  tablinks.forEach(tablink => {
    tablink.classList.remove("active");
    const targetTab = document.querySelector(tablink.getAttribute("href"));
    targetTab.style.display = "none";
  });
  event.target.classList.add("active");
  currentTab.style.display = "block";
}

tablinks.forEach(tablink => {
  tablink.addEventListener("click", switchTab);
});

In the code above, we are selecting the <div> element with a class of "tabs" and the links inside of it. We are then creating a function called switchTab() that will be used to switch between tabs. Inside the function, we are first preventing the default action of the link, then selecting the current tab. We are then looping through the tablinks and removing the "active" class from each one, and hiding the target tab. Finally, we are adding the "active" class to the link that was clicked, and making the current tab visible.

We are then looping through the tablinks and adding an event listener for the "click" event, and calling the switchTab() function when a link is clicked.

And that's it! You now have a working tabbed interface with HTML, CSS, and JavaScript.