Author: | zoltantothcom |
---|---|
Views Total: | 2,092 views |
Official Page: | Go to website |
Last Update: | January 19, 2021 |
License: | MIT |
Preview:

Description:
A simple, lightweight, blazing-fast tabs vanilla JavaScript library for the web.
How to use it:
1. Add the JavaScript vanilla-js-tabs.js
and Stylesheet vanilla-js-tabs.css
to the 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 should be open on page load.
var tabs = new Tabs({ elem: 'tabs', open: 2 });
5. Open a specific tab.
tabs.open(2);
6. Update the tabs.
tabs.update(2);
7. Destroy the instance.
tabs.destroy();