Latest web development tutorials

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

<Class = datos UL "pestañas" -Tab>
<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:

Ejemplos

<Ul class = "pestañas vertical" de datos-tab>

Trate »

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

<Class = datos UL "pestañas" -Tab>
<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

.tabs contenido> .content.active {
-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 »