Responsive & pestañas accesibles con JavaScript puro
| Autor: | oliverfarrell |
|---|---|
| Views Total: | 3,255 |
| Sitio oficial: | Ir a la web |
| Actualizado: | April 13, 2015 |
| Licencia: | MIT |
Vista prévia
Descripción
Una biblioteca de JavaScript nativa pura que pretende crear una interfaz con pestañas receptiva y accesible con ARIA & soporte de teclado.
Funcionamiento
Cargue el script Tabs. js al final del documento.
<script src="path/to/tabs.js"></script>
Crear & paneles de navegación de pestaña como sigue:
<div class="tabs"> <ul class="tabs__list"> <li><a>Tab 1</a></li> <li><a>Tab 2</a></li> <li><a>Tab 3</a></li> </ul> <div class="tabs__tab-content"> <h2>Tab 1</h2> <p>Content 1</p> </div> <div class="tabs__tab-content"> <h2>Tab 2</h2> <p>Content 2</p> </div> <div class="tabs__tab-content"> <h2>Tab 3</h2> <p>Content 3</p> </div> </div>
Agregue su propio CSS para el estilo de la interfaz con pestañas.
[role="tablist"] {
margin:0;
float:left;
width:100%
}
[role="presentation"] {
display:inline-block;
float:left;
list-style:none
}
[role="tab"] {
padding:10px;
float:left
}
[role="tab"][aria-selected="true"], [role="tab"]:focus {
background-color:#f4f4f4
}
[role="tabpanel"][aria-hidden="false"] {
padding:10px;
float:left;
width:100%;
border:1px solid #eee
}
[role="tabpanel"][aria-hidden="true"] {
display:none
} Inicialización.
Tabs.init();
