Author: | janmarkuslanger |
---|---|
Views Total: | 1,430 views |
Official Page: | Go to website |
Last Update: | August 25, 2018 |
License: | MIT |
Preview:

Description:
tabsjs is a minimalist tabs component written in ES6. This component enables the user to switch between tabbed content by clicking on the tabs.
How to use it:
Create the tabs following the html as these:
<div data-tabs> <div class="bar"> <div data-tabs-item="1" data-tabs-active>1</div> <div data-tabs-item="2">2</div> <div data-tabs-item="3">3</div> </div> <div class="content"> <div data-tabs-content="1" data-tabs-active>Tab 1</div> <div data-tabs-content="2">Tab 2</div> <div data-tabs-content="3">Tab 3</div> </div> </div>
Place the main JavaScript file ‘tabs.js’ at the bottom of the webpage.
<script src="tabs.js"></script>
The required CSS rules.
[data-tabs] [data-tabs-content] { display: none; } [data-tabs] [data-tabs-content][data-tabs-active] { display: block; }
Initialize the tabs component and done.
Tabs.init()
Apply your own CSS styles to the tabs.
[data-tabs] { /* your css here */ } [data-tabs] .bar { /* your css here */ } [data-tabs] [data-tabs-item] { /* your css here */ } [data-tabs] [data-tabs-content] { /* your css here */ } [data-tabs] [data-tabs-item][data-tabs-active] { /* your css here */ } [data-tabs] [data-tabs-item]:last-child { /* your css here */ }
Changelog:
08/25/2018
- Adding comments and constants