Sistema de pestañas compatible con JavaScript ES 6 simple
| Autor: | prog666 |
|---|---|
| Views Total: | 2,550 |
| Sitio oficial: | Ir a la web |
| Actualizado: | September 14, 2015 |
| Licencia: | MIT |
Vista prévia
Descripción
Un componente de pestañas sencillo, compatible con AJAX, que se ha hecho para ECMAScript 6 y 5.
Funcionamiento
Incluya las pestañas. js (o Tabs. ES5. js) en su página web.
<script src="/path/to/tabs.es5.js"></script>
Crear navegación y contenido para las pestañas.
<div class="tabs"> <div class="tabs__toggle tabs__toggle_active">tab 1</div> <div class="tabs__toggle">tab 2</div> <div class="tabs__tab">tab 1 content</div> <div class="tabs__tab">tab 2 content</div> </div>
Inicializar el sistema de pestañas.
var initTabs = module.exports['default'];
initTabs('.tabs'); Cargue orígenes de datos externos con el atributo de datos HTML5.
<div class="tabs"> <div class="tabs__toggle tabs__toggle_active">tab 1</div> <div class="tabs__toggle">tab 2</div> <div class="tabs__tab">tab 1 content</div> <div class="tabs__tab" data-src="1.html">tab 2 content</div> </div>
Estilo el sistema de pestañas lo que quieras.
.tabs__toggle {
display: inline-block;
cursor: pointer;
color: #ccc;
margin: 0 5px;
padding: 5px 10px;
border: 1px solid #000;
}
.tabs__toggle_active {
cursor: default;
color: #fff;
border: 1px solid #FC6D58;
}
.tabs__tab { padding-top: 10px; }
.tabs {
border: 1px solid #ccc;
padding: 10px;
margin: 20px auto;
max-width: 400px;
}
