guia Foundation
navegação Tab pode ser muito bom para mostrar conteúdo diferente, eo conteúdo pode ser comutada.
Use a guia <ul class="tabs" data-tab> -tab> para criar cada opção <li> elemento e adicionar .tab-title classe para criar.
Dica: Você pode usar o item selecionado no momento .active classe.
Exemplos
<Li class = "tab-título ativo"> <a href = "#"> Home </ a> </ li>
<LI class = "tab-title "> <a href = "#"> Menu 1 </ a> </ li>
<LI class = "tab-title "> <a href = "#"> Menu 2 </ a> </ li>
<LI class = "tab-title "> <a href = "#"> Menu 3 </ a> </ li>
</ Ul>
tente »
guia Vertical
guia Vertical Use .vertical categorias:
comutação tab
Se você quiser alterar o separador configuração, você pode usar o elemento <div> além .content classe. Além de uma identificação única em cada guia, e conectá-lo ao item de lista (<a href = "# menu1" abre id = conteúdo opção "menu1"). Finalmente, todas as opções sobre o conteúdo <div> no elemento, o <div> elemento para adicionar .tabs-content classe, e inicializa Fundação JS.
Nota .active classe é automaticamente adicionado à guia selecionada no momento:
Exemplos
<Li class = "tab-título ativo"> <a href = "#home"> Home </ a> </ li>
<LI class = "tab-title "> <a href = "# menu1"> Menu 1 </ a> </ li>
<LI class = "tab-title "> <a href = "# menu2"> Menu 2 </ a> </ li>
<LI class = "tab-title "> <a href = "# menu3"> Menu 3 </ a> </ li>
</ Ul>
<Div class = "tabs-content ">
<Div class = "conteúdo ativo" id = "casa">
<H3> HOME </ h3>
<P> Home é onde o coração é .. </ p>
</ Div>
<Div class = "content" id = "menu1">
<H3> Menu 1 </ h3 >
<P> Algum texto, blabla < / p>
</ Div>
<Div class = "content" id = "menu2">
<H3> Menu 2 </ h3 >
<P> Algum outro texto. < / P>
</ Div>
<Div class = "content" id = "menu3">
<H3> Menu 3 </ h3 >
<P> Última guia. </ P>
</ Div>
</ Div>
<! - Inicializar Fundação JS ->
<Script>
$ (Document) .ready (function () {
$ (Documento) .foundation ();
})
</ Script>
tente »
tab desvanece-se
Use CSS para personalizar as guias desaparecer em vigor:
Exemplos
-webkit-animação: fadeEffect 1s;
animação: 1s fadeEffect;
}
@ -webkit-Keyframes fadeEffect {
de {opacidade: 0;}
para {opacidade: 1;}
}
@keyframes fadeEffect {
de {opacidade: 0;}
para {opacidade: 1;}
}
tente »