InícioFunçã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
por ZombieW 29.08.16 22:36
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?
ZombieW- Super Membro
- Membro desde : 02/08/2010
Mensagens : 1452
Pontos : 2020 -
Re: Função aba nos tópicos
por Cepheus 30.08.16 16:55
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}
Cepheus- Membro
- Membro desde : 21/03/2014
Mensagens : 514
Pontos : 1085 -
Re: Função aba nos tópicos
por ZombieW 30.08.16 17:32
@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?
ZombieW- Super Membro
- Membro desde : 02/08/2010
Mensagens : 1452
Pontos : 2020 -
Re: Função aba nos tópicos
por Cepheus 30.08.16 18:44
Só adicionar no seu css:
- Código:
.container {
width: auto!important;
text-align: center;
}
Cepheus- Membro
- Membro desde : 21/03/2014
Mensagens : 514
Pontos : 1085 -
ZombieW- Super Membro
- Membro desde : 02/08/2010
Mensagens : 1452
Pontos : 2020 -
Re: Função aba nos tópicos
por while 30.08.16 19:05
 | Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada. Tópico marcado como Resolvido e movido para "Questões resolvidas". |
while- Hiper Membro
- Membro desde : 24/04/2016
Mensagens : 3263
Pontos : 4761 -
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
Facebook
Twitter
Youtube
