[TUTORIAL] Exibição de conteúdo por abas
Página 1 de 1 • Compartilhe
[TUTORIAL] Exibição de conteúdo por abas
Exibir conteúdo por abas |
Muitas vemos conteúdos que são expostos atráves de abas, ao clicar em uma é um conteúdo ao clicar em outra já é outro conteúdo, com este tutorial iremos aprender a criar esta exibição de conteúdo por abas, e o melhor, nem precisa de carregar outra página para mostrar um conteúdo diferente!
--> Tutoriais, dicas e astúcias <--
Exibição de conteúdo por abas
Exibição de conteúdo por abas
1º - Código a ser utilizado:
- Códigos CSS para uma melhor exibição do conteúdo e das abas:
- Código:
<style>div.aba {
background:#fff;
text-align:justify;
margin-bottom:20px;
padding:10px 15px;
border:1px solid #CcC;
box-shadow:inset 1px 1px 2px #999;
border-radius:4px;
}
#navebar {
font:bold 12px Georgia, "Times New Roman", Times, serif;
margin:0;
padding:3px 0;
}
#navebar li {
list-style:none;
margin-right:6px;
display:inline;
}
#navebar li a {
padding:3px 6px;
border:1px solid #09F;
border-bottom:none;
background:#dde;
color:#333;
text-decoration:none;
}
#navebar li a:hover {
color:#000;
background:#aae;
border-color:#09F;
}
#navebar li a.ativo {background-color:#009;}
#navebar li a {
color: #FFF;
font-size: 14px;
font-weight: bold;
text-align: center;
text-shadow: 0 -1px 0 rgba(0,0,0,0.2);
background-color: #1AB8D6;
border-radius: 6px;
padding: 10px 6px 10px;
display: block;
width:120px;
border-width: 1px 1px 3px 1px;
border-style: solid;
border-color: rgba(0,0,0,0.16);
box-shadow: inset 0 0 2px rgba(255,255,255,0.76);
-webkit-transition: background-color 0.5s;
-moz-transition: background-color 0.5s;
-o-transition: background-color 0.5s;
display:inline-block;
transition: background-color 0.5s;
}
#navebar li a:hover { background-color: #22D5E7;}</style>
- Abas e seu conteúdo.<script>
jQuery(document).ready(function(){
jQuery('#seender_abas').prepend(
'<ul id="navebar"> <li><a class="ativo">Aba 1</a></li> <li><a>Aba 2</a></li></ul>')
jQuery('.aba').css({
display: 'none',
marginTop: 0,
borderTopWidth: 0
})
jQuery('#aba1').css('display', 'block');
jQuery('a', jQuery('#navebar')).click(function() {
var i = jQuery('a', jQuery('#navebar')).index(this) + 1;
jQuery(this).parents('#seender_abas').children('.aba:visible').hide();
jQuery('#aba' + i).show();
jQuery(this).parents('#navebar').find('a').removeClass('ativo');
jQuery(this).addClass('ativo');
})
})
</script><div id="seender_abas">
<div id="aba1" class="aba">
Conteúdo da aba 1. </div>
<div id="aba2" class="aba">
Conteúdo da aba 2.
</div>
</div>
Preto -> Título da aba.
Sublinhado -> O código que deverá ser multiplicado para adicionar mais de uma aba.
Italico -> O código que terá de multiplicar para que seja adicionado o conteúdo a nova aba criada. Recomenda-se que a cada nova aba criada (multiplicando o sublinhado) também se multiplique o código em italico.
Vermelho -> O contéudo referente a aba.
2º - Aplicação do código:
O código poderá ser aplicado em vários locais, para mais informações leia o tutorial referente ao local de possível adição:
- Resultado:
© Fórum dos Fóruns & seender
Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título: [Dúvida] Exibição de conteúdo por abas |
Tópicos semelhantes
» Problemas com Exibição de Abas
» [TUTORIAL] Nome de exibição alternativo
» Problema com exibição do conteúdo da página HTML
» [TUTORIAL] Abas de tópicos
» [TUTORIAL] Categorias em abas
» [TUTORIAL] Nome de exibição alternativo
» Problema com exibição do conteúdo da página HTML
» [TUTORIAL] Abas de tópicos
» [TUTORIAL] Categorias em abas
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos