Vanilla JavaScript Tabs is a simple and lightweight JS Tabs library for the web.
How to make use of it:
1. Add the JavaScript vanilla-js-tabs.js
and Stylesheet vanilla-js-tabs.css
to the web page.
<link rel="stylesheet" href="vanilla-js-tabs.css" /> <script src="vanilla-js-tabs.min.js"></script>
2. The required HTML structure for the tabs.
<div class="js-tabs" id="tabs"> <ul class="js-tabs__header"> <li><a class="js-tabs__title" href="#">Tab 1</a></li> <li><a class="js-tabs__title" href="#">Tab 2</a></li> <li><a class="js-tabs__title" href="#">Tab 3</a></li> </ul> <div class="js-tabs__content"> <h1>Tab 1</h1> </div> <div class="js-tabs__content"> <h1>Tab 2</h1> </div> <div class="js-tabs__content"> <h1>Tab 3</h1> </div> </div>
3. Initialize the tabs plugin.
var tabs = new Tabs({ elem: "tabs" });
4. Determine which tab must be open on web page load.
var tabs = new Tabs({ elem: 'tabs', open: 2 });
5. Open a particular tab.
tabs.open(2);
6. Update the tabs.
tabs.update(2);
7. Destroy the instance.
tabs.destroy();
Simple Fast Tabs, Vanilla JavaScript Tabs Plugin/Github
See Demo And Download
Official Website(zoltantothcom): Click Here
This superior jQuery/javascript plugin is developed by zoltantothcom. For extra Advanced Usages, please go to the official website.
Be First to Comment