Simple Javascript Tabs Library – Simple Tab

Preview:

Description:

Simple Tab  is a super tiny javascript library/plugin for creating a tabbed interface that allows you to switch between content sections by clicking the tabs. It can be used both as a standalone javascript library or a plugin for jQuery.

How to use it:

Add the Simple-Tab library on your web page.

<script src="simple-tabs-pure-js.js"></script>

Include the CSS file for basic styles.

<link rel="stylesheet" type="text/css" href="css/default.css">

Create the html for a tabbed interface.

<ul class="simple-tabs" id="demo-tabs">
<li class="info active">Info</li>
<li class="images">Images</li>
<li class="recipes">Recipes</li>
</ul>
<div class="clear-float"></div>
<div id="info" class="tab-page active-page">
Tabbed content 1
</div>
<div id="images" class="tab-page">
Tabbed content 2
</div>
<div id="recipes" class="tab-page">
Tabbed content 3
</div>

Initialization.

<script>        
window.onload = function() {
var demoTabs = new SimpleTabs(document.getElementById('demo-tabs'));
};
</script>