Componente simple de las pestañas de JavaScript sencillo-jTabs

Vista prévia

Descripción

jTabs es un componente de pestañas JavaScript sensible que permite cambiar entre paneles con pestañas de una manera fácil. El componente también tiene la capacidad de convertir las pestañas normales en una interfaz de acordeón vertical en pantallas pequeñas.

How it works:

• tomar DOM-Container como parámetro
• pestañas y secciones de búsqueda
• y cámbielos

Funcionamiento

Enlace al archivo principal de JavaScript como este:

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

La estructura básica de HTML para las pestañas y las secciones con pestañas.

<main class="tabs-js">


<div class="tabs-buttons">


<button class="tabs-buttons__btn
tabs-buttons__btn--active
btn-js">Tab 1</button>


<button class="tabs-buttons__btn
btn-js">Tab 2</button>


<button class="tabs-buttons__btn
btn-js">Tab 3</button>

</div>


<div class="tabs-sections">


<div class="tabs-sections__section
tabs-sections__section--active
tab-js
tab-active-js">



<p>Section 1</p>


</div>


<div class="tabs-sections__section
tab-js">



<p>Section 2</p>


</div>


<div class="tabs-sections__section
tab-js">



<p>Section 3</p>


</div>

</div>

</main>

Llame a la función jTabs y done. Parámetro reuired: contenedor. Parámetros adicionales: activeBtnClass, activeTabClass.

jTabs('.tabs-js', 'tabs-buttons__btn--active', 'tab-active-js');

Estilo el componente de pestañas utilizando sus propios estilos CSS.

.tab-js { display: none; }

.tab-active-js { display: block; }

.tabs-header {

font-size: 25px;

text-align: center;

margin: 3rem auto;
}

.centering-layer {

width: 100%;

max-width: 800px;

margin: 2rem auto;
}

.tabs-buttons { font-size: 14px; }

.tabs-buttons__btn {

display: block;

width: 100%;

text-decoration: none;

font-weight: bold;

border: 2px solid #4EC6DE;

border-bottom-width: 0;

color: #333;

background-color: #fff;

outline: none;

padding: 12px 20px;

cursor: pointer;

transition: background-color .3s;
}

.tabs-buttons__btn:hover, .tabs-buttons__btn--active {

color: #fff;

background-color: #4EC6DE;
}

.tabs-sections {

padding: 10px 20px;

border: 2px solid #4EC6DE;
}

Hazlo receptivo y más fácil de usar en dispositivos de pantalla pequeña.

@media screen and (min-width: 640px) {

.tabs-buttons { font-size: 0; }

.tabs-buttons__btn {

width: auto;

display: inline-block;

font-size: 14px;
}

.tabs-buttons__btn:not(:last-child) { margin-right: 5px; }

}