Minimal Tab Switcher In Vanilla JavaScript

Preview:

Description:

A minimal clean Vanilla JavaScript tabs component to switch between tabbed content in an unobtrusive way.

How to use it:

1. Load the JavaScript tabs.js and Stylesheet tabs.css in the page.

<link rel="stylesheet" href="css/tabs.css" />
<script src="js/tabs.js"></script>

2. The required markup structure for the tabs & tabbed content.

<div class="container">
  <div class="tabs">
    <ul>
      <li><a href="#">Tab Trigger 1</a></li>
      <li><a href="#">Tab Trigger 2</a></li>
      <li><a href="#">Tab Trigger 3</a></li>
    </ul>
    <div>
      <div>Tab Content 1</div>
      <div>Tab Content 2</div>
      <div>Tab Content 3</div>
    </div>
  </div>
</div>