The Easiest Way to Create JavaScript Tabs on a Website

Photo by Yayan Kurnia Akbar

Many articles or tutorials out there discuss how to create JavaScript tabs on a website. However, they are often too complicated and not beginner-friendly.

In this article, Mangcoding will discuss the easiest way to create JavaScript tabs on a website in a very simple way.

JavaScript is a programming language primarily used to make web pages interactive and dynamic. It is also one of the core technologies in web development, alongside HTML and CSS.

This language is very popular and widely used in modern web application development, including Single Page Applications (SPA) built using frameworks like React, Angular, or Vue.js.

Some key features of JavaScript include:

1. Interactivity: JavaScript allows web developers to add interactive features to websites, such as dropdown menus, modal pop-ups, and animations.
2. DOM Manipulation: JavaScript can be used to modify the Document Object Model (DOM) of a web page, allowing changes to the page structure, content, or style without needing to reload the page.
3. Event-Driven Programming: JavaScript supports event handling, which means certain actions on the web page, such as button clicks or input changes, can trigger JavaScript functions.
4. Browser Compatibility: JavaScript runs directly in the browser without needing compilation, making it very flexible and easy to use.
5. Full-Stack Development: With the rise of environments like Node.js, JavaScript can now be used not only for frontend (client-side) development but also for backend (server-side) development.
6. Simple JavaScript Tabs:

Tab JavaScript sederhana

First, let’s look at the HTML tab structure below:

<ul>
  <li>
    <a
      href="javascript:rudrSwitchTab('tb_1', 'content_1');"
      id="tb_1"
      class="tabmenu active"
      >Tab 1</a
    >
  </li>
  <li>
    <a
      href="javascript:rudrSwitchTab('tb_2', 'content_2');"
      id="tb_2"
      class="tabmenu"
      >Tab 2</a
    >
  </li>
</ul>
<div id="content_1" class="tabcontent">Content of the first tab.</div>
<div id="content_2" class="tabcontent" style="display: none">
  Content of the second tab.
</div>

Next, here is the JavaScript function. You can insert this function anywhere on the page or in another JS file. See the code below:

function rudrSwitchTab(rudr_tab_id, rudr_tab_content) {
  // first of all we get all tab content blocks (I think the best way to get them by class names)
  var x = document.getElementsByClassName("tabcontent");
  var i;
  for (i = 0; i < x.length; i++) {
      x[i].style.display = 'none'; // hide all tab content
  }
  document.getElementById(rudr_tab_content).style.display = 'block'; // display the content of the tab we need


  // now we get all tab menu items by class names (use the next code only if you need to highlight current tab)
  var x = document.getElementsByClassName("tabmenu");
  var i;
  for (i = 0; i < x.length; i++) {
      x[i].className = 'tabmenu';
  }
  document.getElementById(rudr_tab_id).className = 'tabmenu active';
}

Next, you can add some CSS (Cascading Style Sheet) to make your JavaScript tabs look unique and attractive.

That’s the article Mangcoding shared on how to create the easiest JavaScript tabs on a website. Hopefully, this article can be useful for everyone.

Source : Rudrastyh