Plugin de JavaScript Vanilla para pestañas modernas-Tabs. js
| Autor: | lozovyk |
|---|---|
| Views Total: | 252 |
| Sitio oficial: | Ir a la web |
| Actualizado: | January 9, 2019 |
| Licencia: | MIT |
Vista prévia
Descripción
Un plugin mínimo, moderno y suavemente animado Tabs implementado en JavaScript puro y CSS/CSS3.
Funcionamiento
Importe la hoja de estilo Tabs. CSS en el documento.
<link rel="stylesheet" href="src/tabs.css">
Cree la lista de pestañas y el panel de pestañas correspondiente de la siguiente manera:
<section class="tabs-section"> <div id="horizontal-tabs"> <ul class="tabs"> <div class="selector"></div> <li class="tab active-item">Tab 1</li> <li class="tab">2</li> <li class="tab"><span class="hidden-tab-name">Hidden name </span>3</li> <li class="tab">4 [special long name]</li> </ul> <div class="tab-content"> <div id="item1" class="tab-item-content active">// Some content(1)</div> <div id="item2" class="tab-item-content">// Some content (2)</div> <div id="item3" class="tab-item-content">// Third Slide</div> <div id="item4" class="tab-item-content">// Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus corporis deserunt expedita magni nemo numquam qui quidem quisquam rerum voluptate.</div> </div> </div> </section>
Importar el principal de JavaScript Tabs. js. Hecho.
<script src="src/tabs.js"></script>
