Small Customizable JavaScript Tabs Plugin – WellTabber

Preview:

Description:

WellTabber is a tiny and easy to customize JavaScript plugin used for generating horizontal or vertical tabbed interface from plain Html & CSS.

How to use it:

Include the WellTabber’s JavaScript file on the webpage and we’re ready to go.

<script src="WellTabber.js"></script>

Create a basic horizontal tabbed interface.

<div class="tabsDemoBox noNavArr">
  <div class="infoNav">
    <span class="active aim" data-aimNoNavAr="tab_1">Tab 1</span>
    <span class="aim" data-aimNoNavAr="tab_2">Tab 2</span> 
    <span class="aim" data-aimNoNavAr="tab_3">Tab 3</span>
  </div>
  <div class="tabsBox">
    <ul class="detailTab active" data-targetNoNavAr="tab_1">
      <li>
        <h2>TAB 1</h2>
      </li>
    </ul>
    <ul class="detailTab" data-targetNoNavAr="tab_2">
      <li>
        <h2>TAB 2</h2>
      </li>
    </ul>
    <ul class="detailTab" data-targetNoNavAr="tab_3">
      <li>
        <h2>TAB 3</h2>
      </li>
    </ul>
  </div>
</div>

Initialize the WellTabber plugin.

new WellTabber("[data-aimNoNavAr]","[data-targetNoNavAr]","active");

Apply your own CSS styles to the plugin.

.tabsDemoBox {
  ...
}