pestaña Fundación
navegación pestaña puede ser muy bueno para mostrar contenidos diferentes, y el contenido puede ser conmutada.
Utilice la ficha <ul class="tabs" data-tab>
-Tab> para crear cada opción <li> y añadir .tab-title
clase para crear.
Consejo: Puede utilizar el elemento seleccionado en ese momento .active
clase.
Ejemplos
<Li class = "tabuladores título activa"> <a href = "#"> Inicio </ a> </ li>
<Li class = "tabuladores título "> <a href = "#"> Menú 1 </ a> </ li>
<Li class = "tabuladores título "> <a href = "#"> Menú 2 </ a> </ li>
<Li class = "tabuladores título "> <a href = "#"> Menú 3 </ a> </ li>
</ Ul>
Trate »
pestaña vertical
Utilice el tabulador vertical .vertical
categorías:
conmutación pestaña
Si desea cambiar la pestaña de configuración, puede utilizar el elemento <div> más .content
de clase. Además de un identificador único en cada ficha, y conectarlo al elemento de lista (<a href = "# menu1" abre id = contenido de opción "menu1"). Por último, todas las opciones sobre el contenido <div>
en el elemento, el <div>
elemento para añadir .tabs-content
de clase, e inicializa Fundación JS.
Nota .active
clase se añade automáticamente a la ficha seleccionada en ese momento:
Ejemplos
<Li class = "tabuladores título activa"> <a href = "#home"> Inicio </ a> </ li>
<Li class = "tabuladores título "> <a href = "# menu1"> Menú 1 </ a> </ li>
<Li class = "tabuladores título "> <a href = "# menu2"> Menú 2 </ a> </ li>
<Li class = "tabuladores título "> <a href = "# menu3"> Menú 3 </ a> </ li>
</ Ul>
<Div class = "pestañas de contenido ">
<Div class = "contenido activo" id = "casa">
<H3> INICIO </ h3>
<P> El hogar es donde el corazón es .. </ p>
</ Div>
<Div class = "contenido" id = "menu1">
<H3> Menú 1 </ h3 >
<P> Un texto, blabla < / p>
</ Div>
<Div class = "contenido" id = "menu2">
<H3> Menú 2 </ h3 >
<P> Un otro texto. < / P>
</ Div>
<Div class = "contenido" id = "menu3">
<H3> Menú 3 </ h3 >
<P> Última pestaña. </ P>
</ Div>
</ Div>
<! - Inicializar Fundación JS ->
<Script>
$ (Document) ready (function () {
$ (Document) .foundation ();
})
</ Script>
Trate »
pestaña fundido
Usar CSS para personalizar pestañas se desvanecen en efecto:
Ejemplos
-webkit-animación: fadeEffect 1s;
animación: 1s fadeEffect;
}
@ -webkit-Fotogramas clave fadeEffect {
de {opacidad: 0;}
a {opacidad: 1;}
}
@keyframes fadeEffect {
de {opacidad: 0;}
a {opacidad: 1;}
}
Trate »