fafaz-Tab is a lightweight tab plugin with no dependencies (3KB minified / 1.3KB gzipped)
<body>
<div class="tab" hidden>
<div class="tab-header">
<div class="tab-header__item">title 1</div>
<div class="tab-header__item">title 2</div>
<div class="tab-header__item">title 3</div>
</div>
<div class="tab-body">
<div class="tab-body__item">content 1</div>
<div class="tab-body__item">content 2</div>
<div class="tab-body__item">content 3</div>
</div>
</div>
</body><body>
.
.
.
<script src="path/Tab.min.js"></script>
<script>
var myTab = new fafaz.Tab.default('.tab');
</script>
</body>npm install --save fafaz-tab or yarn add fafaz-tab
import Tab from 'fafaz-tab';
const myTab = new Tab('.tab');var myTab = new fafaz.Tab('.tab');
myTab.on('change', ({ idx, container }) => {
console.log(idx, container);
})IE10+ (this library uses css flexbox)
MIT
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent