Widget de pestañas ligeras con Pure JavaScript-puretabs

Vista prévia

Descripción

puretabs es una librería JavaScript súper ligera para crear un widget de pestañas en tu página web con el mínimo esfuerzo.

Funcionamiento

La estructura HTML para la navegación de pestañas & secciones.

<div class="tabs">

<nav class="tabs__navigation">


<a class="tabs__link tabs__link--active" href="#first">Tab One</a>


<a class="tabs__link" href="#second">Tab Two</a>


<a class="tabs__link" href="#third">Tab Three</a>


<a class="tabs__link" href="#fourth">Tab Four</a>

</nav>


<p class="tabs__section" id="first">Section One</p>

<p class="tabs__section" id="second">Section Two</p>

<p class="tabs__section" id="third">Section Three</p>

<p class="tabs__section" id="fourth">Section Four</p>


</div>

Cargue el script puretabs. js en el documento.

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

Inicializar el widget de pestañas.

pureTabs.init('tabs__link', 'tabs__link--active');

Estilo el widget de pestañas lo que desee.

.tabs {

border: 1px solid #ddd;

position: relative;

margin-top: 5rem;

margin-bottom: 3rem;
}

.tabs__section { margin: 1rem; }

.tabs__navigation {

margin-left: -1px;

position: absolute;

top: -34px;
}

.tabs__link {

display: inline-block;

border: 1px solid #ddd;

text-decoration: none;

padding: .25rem .75rem;

color: #B3B3B3;

background: #E7E7E7;

margin-left: .25rem;
}

.tabs__link:first-child { margin-left: 0; }

.tabs__link--active {

font-weight: bold;

border-bottom-color: #fff;

background: #fff;

color: #186baa;
}