Author: | andrew--r |
---|---|
Views Total: | 2,343 views |
Official Page: | Go to website |
Last Update: | May 5, 2015 |
License: | MIT |
Preview:

Description:
puretabs is a super lightweight JavaScript library to create a tabs widget on your webpage with minimal effort.
How to use it:
The html structure for the tabs navigation & sections.
<div class="tabs"> <nav class="tabs__navigation"> <a class="tabs__link tabs__link--active" href="#first">Tab One</a> <a class="tabs__link" href="#second">Tab Two</a> <a class="tabs__link" href="#third">Tab Three</a> <a class="tabs__link" href="#fourth">Tab Four</a> </nav> <p class="tabs__section" id="first">Section One</p> <p class="tabs__section" id="second">Section Two</p> <p class="tabs__section" id="third">Section Three</p> <p class="tabs__section" id="fourth">Section Four</p> </div>
Load the puretabs.js script in the document.
<script src="puretabs.js"></script>
Initialize the tabs widget.
pureTabs.init('tabs__link', 'tabs__link--active');
Style the tabs widget whatever you wish.
.tabs { border: 1px solid #ddd; position: relative; margin-top: 5rem; margin-bottom: 3rem; } .tabs__section { margin: 1rem; } .tabs__navigation { margin-left: -1px; position: absolute; top: -34px; } .tabs__link { display: inline-block; border: 1px solid #ddd; text-decoration: none; padding: .25rem .75rem; color: #B3B3B3; background: #E7E7E7; margin-left: .25rem; } .tabs__link:first-child { margin-left: 0; } .tabs__link--active { font-weight: bold; border-bottom-color: #fff; background: #fff; color: #186baa; }