Tabs in pure JavaScript.
Demo: http://redvi.github.io/jTabs
$ npm install --save jtabs
Include these files in your project (with gulp/webpack/etc) and import them.
<section class="tabs-container">
<div class="tabs-buttons">
<button class="tabs-buttons__btn tabs-buttons__btn_active">HTML</button>
<button class="tabs-buttons__btn">CSS</button>
</div>
<div class="tabs-sections">
<div class="tabs-sections__section tabs-sections__section_active">
<p>Text</p>
</div>
<div class="tabs-sections__section">
<p>Another text</p>
</div>
</div>
</section>import { JTabs } from 'jtabs';
import 'jtabs/lib/jtabs.min.css';
const tabs = new JTabs({ container: '.tabs-container' });
tabs.init();| Option | Default value |
|---|---|
| container | '.tabs-container' |
| button | '.tabs-buttons__btn' |
| tab | '.tabs-sections__section' |
| activeBtnClass | 'tabs-buttons__btn_active' |
| activeTabClass | 'tabs-sections__section_active' |
$ npm i -g static-server typescript
$ npm run compile && static-server lib
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent