Simple & móvil-primero alternar pestañas-tabby. js

Vista prévia

Descripción

Tabby. js es una biblioteca de JavaScript sencilla y ligera para crear pestañas de alternancia en dispositivos móviles con el mínimo esfuerzo.

Funcionamiento

Cargue el tabby. CSS para los estilos de las pestañas básicas.

<link rel="stylesheet" href="dist/css/tabby.css">

Crear pestañas y contenido con pestañas como sigue.

<div class="tabs">

<button data-tab="#tab1">Tab 1</button>

<button data-tab="#tab2">Tab 2</button>

<button data-tab="#tab3">Tab 3</button>
</div>
<div class="tabs-content">

<div class="tabs-pane active" id="tab1">


<p><strong>Tab 1 Content</strong></p>


<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer arcu nulla.</p>

</div>

<div class="tabs-pane" id="tab2">


<p><strong>Tab 2 Content</strong></p>


<p>Integer placerat auctor neque quis hendrerit. Vestibulum erat diam, dictum nec velit id.</p>

</div>

<div class="tabs-pane" id="tab3">


<p><strong>Tab 3 Content</strong></p>


<p>Fusce sagittis orci non tortor hendrerit, sed malesuada nisl cursus. </p>

</div>
</div>

O …

<ul class="tabs">

<li><a data-tab="#taba" href="#taba">Tab 1</a></li>

<li><a data-tab="#tabb" href="#tabb">Tab 2</a></li>

<li><a data-tab="#tabc" href="#tabc">Tab 3</a></li>
</ul>
<div class="tabs-content">

<div class="tabs-pane active" id="taba">


<p><strong>Tab 1 Content</strong></p>


<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer arcu nulla.</p>

</div>

<div class="tabs-pane" id="tabb">


<p><strong>Tab 2 Content</strong></p>


<p>Integer placerat auctor neque quis hendrerit. Vestibulum erat diam, dictum nec velit id.</p>

</div>

<div class="tabs-pane" id="tabc">


<p><strong>Tab 3 Content</strong></p>


<p>Fusce sagittis orci non tortor hendrerit, sed malesuada nisl cursus. </p>

</div>
</div>

Inicializar las pestañas de alternancia.

tabby.init();

Registro de cambios

v12.0.1 (03/09/2019)

• Añadida la reserva para el atributo oculto
• Totalmente reescrito para mejor a11y

08/01/2018

• Mejor soporte de selector