O melhor tutorial guia Foundation em 2024. Neste tutorial você pode aprender
guia Vertical,comutação tab,tab desvanece-se,
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
<Class = dados "guias" UL -tab>
<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:
Exemplos
<Ul class = "guias vertical" -guia dados>
tente »
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
<Class = dados "guias" UL -tab>
<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 é pt </ 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
.tabs-content> .content.active {
-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 »