Simple Javascript Tabs Library – Simple Tab

Category: Javascript , Layout | February 22, 2014
Views Total:11,695 views
Official Page:Go to website
Last Update:February 22, 2014


Simple Javascript Tabs Library – Simple Tab


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>
<div class="clear-float"></div>
<div id="info" class="tab-page active-page">
Tabbed content 1
<div id="images" class="tab-page">
Tabbed content 2
<div id="recipes" class="tab-page">
Tabbed content 3


window.onload = function() {
var demoTabs = new SimpleTabs(document.getElementById('demo-tabs'));

You Might Be Interested In:

Leave a Reply