Basic Clean Tabbed Content Plugin In Pure JavaScript – Tabed.js

Preview:

Description:

Tabed.js is a minimal clean tabs plugin that automatically generates a tabs navigation to switch between tabbed content.

See also:

• Top 10 JavaScript & CSS Tabs Components

How to use it:

Install the Tabed.js with NPM.

# NPM
$ npm install tabed --save

Or directly include the JavaScript and CSS files on the page.

<link rel="stylesheet" href="dist/tabed.min.css">
<script src="dist/tabed.min.js"></script>

Create the tabbed content and specify the tab names displayed in the navigation tabs.

<div class="tabed">
  <div class="tab" data-title="Tab 1">
    Tab Content 1
  </div>
  <div class="tab" data-title="Tab 2">
    Tab Content 2
  </div>
  <div class="tab" data-title="Tab 2">
    Tab Content 3
  </div>
</div>

Initialize the tabed library and done.

new Tabed(".tabed");

Specify which tab should be opened on page load.

new Tabed(".tabed", {
    tabOpen: 2 // 2 = tab 3
});