Função aba nos tópicos
3 participantes
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre códigos :: Questões resolvidas sobre códigos Javascript e jQuery
Página 1 de 1 • Compartilhe
Função aba nos tópicos
Detalhes da questão
Endereço do fórum: www.tutorialdoca.com
Versão do fórum: PhpBB3
Descrição
Boa noite,
Estou executando um código tirado desse site:
https://codepen.io/cssjockey/pen/jGzuK
Com os códigos (copie o que estará em cada "spoiler" e cole no quadrado do site) abaixo:
- HTML:
- Código:
<div class="container">
<ul class="tabs">
<li class="tab-link current" data-tab="tab-1">Antes do Reboot</li>
<li class="tab-link" data-tab="tab-2">Depois do Reboot</li>
<li class="tab-link" data-tab="tab-3">Animações</li>
<li class="tab-link" data-tab="tab-4">Reviews</li>
</ul>
<div id="tab-1" class="tab-content current">
Texto Aba 1
</div>
<div id="tab-2" class="tab-content">
Texto Aba 2
</div>
<div id="tab-3" class="tab-content">
Texto Aba 3
</div>
<div id="tab-4" class="tab-content">
Texto Aba 4
</div>
</div><!-- container -->
- CSS:
- Código:
body{
margin-top: 100px;
font-family: Verdana,Arial,Helvetica,sans-serif;
line-height: 1.6
}
.container{
width: 800px;
margin: 0 auto;
}
ul.tabs{
margin: 0px;
padding: 0px;
list-style: none;
}
ul.tabs li{
background: #171717;
color: #FFFFFF;
display: inline-block;
padding: 10px 15px;
cursor: pointer;
}
ul.tabs li.current{
background: #171717;
color: #C1FA17;
font-weight: bold;
}
.tab-content{
display: none;
background: #171717;
color: #FFFFFF;
padding: 15px;
}
.tab-content.current{
display: inherit;
}
- JS:
- Código:
$(document).ready(function(){
$('ul.tabs li').click(function(){
var tab_id = $(this).attr('data-tab');
$('ul.tabs li').removeClass('current');
$('.tab-content').removeClass('current');
$(this).addClass('current');
$("#"+tab_id).addClass('current');
})
})
Afim de obter o mesmo resultado que o site me proporciona, mas meu tópico não está "seguindo" corretamente:
http://www.tutorialdoca.com/t1380-topico-de-testes#1650
Como vocês podem ver, no site onde o código é oferecido as abas ficam na horizontal, mas no meu tópico, ficam na vertical.
Como posso arrumar isso?
Re: Função aba nos tópicos
Isso acontece porque o editor está interpretando os espaços como quebra de linha < br >
Adicione na sua folha de estilo CSS:
Adicione na sua folha de estilo CSS:
- Código:
ul.tabs br, ul.tabs + br, ul.tabs + br + br, .tab-content + br {display:none!important}
Re: Função aba nos tópicos
@Cepheus
Eu te dava um beijo agora se pudesse! auehauehaueh
Me tira só mais uma dúvida:
Eu precisava deixar as abas centralizadas, como faço?
Eu te dava um beijo agora se pudesse! auehauehaueh
Me tira só mais uma dúvida:
Eu precisava deixar as abas centralizadas, como faço?
Re: Função aba nos tópicos
Só adicionar no seu css:
- Código:
.container {
width: auto!important;
text-align: center;
}
Re: Função aba nos tópicos
Obrigado de verdade!
Re: Função aba nos tópicos
Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada. Tópico marcado como Resolvido e movido para "Questões resolvidas". |
Tópicos semelhantes
» Função Curtir em tópicos
» Gerir função de Likes dos tópicos
» Gerir função degrade no fundo dos tópicos
» Função efeito degradê nos tópicos
» Gerir função degrade nos perfis dos tópicos
» Gerir função de Likes dos tópicos
» Gerir função degrade no fundo dos tópicos
» Função efeito degradê nos tópicos
» Gerir função degrade nos perfis dos tópicos
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre códigos :: Questões resolvidas sobre códigos Javascript e jQuery
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos