Diminutas pestañas anidadas con vanilla JavaScript-Tabbis. js

Vista prévia

Descripción

Tabbis. js es una biblioteca de JavaScript ligera y pura para generar pestañas agradables, limpias y anidadas a partir de una estructura HTML sencilla.

Funcionamiento

Coloque el tabbis. js en la Página Web.

<script src="tabbis.js"></script>

Cree un componente normal de pestañas planas:

<div data-tabs>

<div>Tab1</div>

<div>Tab2</div>

<div>Tab3</div>
</div>

<div data-panes>

<div>Pane1</div>

<div>Pane2</div>

<div>Pane3</div>
</div>

Si desea un componente de pestañas complejo que contiene tantas subpestañas.

<div data-tabs>

<div>Tab1</div>

<div>Tab2</div>

<div>Tab3</div>
</div>

<div data-panes>

<div>Pane1</div>

<div>


<div data-tabs>



<div>Tab4</div>



<div>Tab5</div>


</div>



<div data-panes>



<div>Pane4</div>



<div>




<div data-tabs>





<div>Tab6</div>





<div>Tab7</div>




</div>





<div data-panes>





<div>Pane6</div>





<div>Pane7</div>




</div>



</div>


</div>

</div>

<div>Pane3</div>
</div>

Configurar los Tabbis:

var tabs = tabbis.init({


tabGroup: '[data-tabs]',


paneGroup: '[data-panes]',


tabActive: 'active',


paneActive: 'active',


callback: function(tab, pane) {



console.log(tab);



console.log(pane);


}
});

Aplica tus propios estilos a las pestañas del CSS:

[data-tabs] {
 display: flex;
 background: #eee;
 padding: 10px;
 border: 2px solid #ccc;
}

[data-tabs] >* {
 padding: 5px 20px;
 cursor: pointer;
}

[data-tabs] .active {

background: #31a3e8;

color: #fff;

border-radius: 5px;
}

[data-panes] > * {
 display: none;
 border: 2px solid #ccc;
 border-top: none;
 padding: 20px;
}

[data-panes] > .active {
 display: block;
}